离子2捕捉错误时，有没有网络连接

Question

在我的供应商我让所有的API调用，他们是这样的：

listSavedJobs() : Promise <any> { 
    let headers = new Headers({ 'Authorization': localStorage.getItem('token') }); 

    return this.http.get(this.savedJobs, { headers:headers }) 
    .map(res => res.json()) 
    .map(resJson => resJson) 
    .toPromise().catch(function(error) { 
     console.log (error) 
    }); 

} 

我写了一个脚本来检测网络的变化

networkConnection(){ 
    try{ 
     console.log ('called network') 
     this.network.onConnect().subscribe(data => { 
      console.log(data) 
     }, error => console.error(error)); 

     this.network.onDisconnect().subscribe(data => { 
      console.log(data) 
      this.networkStatus() 
     }, error => console.error(error)); 
    } catch(e){ 
     console.log ('network error' + JSON.stringify(e)) 
    }   
} 


networkStatus(){ 
    let alert = this.alertCtrl.create({ 
     title: 'Network Error ', 
     message: 'No internet connectivity detected. Please try again.', 
    }); 

    alert.present(); 
} 

但是当我尝试在catch中调用networkConnection函数时，它会抛出未定义的错误。我如何解决这个问题？

Answer 1

Netowrk检测应该是自动的。您只需在启动您的应用程序时订阅onConnect或onDisconnect。以下是处理网络连接并根据连接可用性进行订阅的工作代码。

如果互联网恢复，它会自动隐藏信息。

network.provider.ts

import { Injectable } from '@angular/core'; 
import { Network } from '@ionic-native/network'; 
import { Platform, IonicApp } from 'ionic-angular'; 
import { SharedProvider } from '../providers/shared.provider'; 
declare var Connection; 
@Injectable() 
export class NetworkProvider { 
    onDevice: boolean; 
    toastAlert: any; 
    constructor(private _shared: SharedProvider, public platform: Platform, public ionicApp: IonicApp, private network: Network) { 
    this.onDevice = this.platform.is('cordova'); 
    } 
    startWatchingConnection() { 

    this.network.onDisconnect().subscribe(() => { 
     let activePortal = this.ionicApp._toastPortal.getActive(); 
     if (!activePortal) { 
      this.alertOffline(); 
     } 
    }); 
    this.network.onConnect().subscribe(() => { 
     let activePortal = this.ionicApp._toastPortal.getActive(); 
     if (activePortal) { 
      activePortal.dismiss(); 
     } 
    }); 
    } 
    alertOffline() { 
    this._shared.Toast.show('No Connection', null, 'bottom', true, 'Ok'); 
    } 
    isOnline(): boolean { 
    console.log(this.network.type); 
    if (this.onDevice && this.network.type) { 
     return this.network.type !== Connection.NONE; 
    } else { 
     return navigator.onLine; 
    } 
    } 
} 

app.component.ts

import { NetworkProvider } from '../providers/network.provider'; 

constructor(platform: Platform, public network: NetworkProvider) { 
    platform.ready().then(() => { 
     if (network.isOnline()) { 
      network.startWatchingConnection(); 
     } else { 
      network.alertOffline(); 
      network.startWatchingConnection(); 
     } 
    }); 
} 

this._shared.Toast.show('No Connection', null, 'bottom', true, 'Ok') calls-

public Toast = { 
    show: (text: string, duration?, position?, closeButton?, btnText?) => { 
     this._toastMsg = this._toastCtrl.create({ 
     message: text, 
     duration: duration || closeButton ? null : 3000, 
     position: position || 'top', 
     showCloseButton: closeButton || false, 
     closeButtonText: btnText || 'OK' 
     }); 
     this._toastMsg.present(); 
    }, 
    hide() { 
     this._toastMsg.dismiss(); 
    } 
    }