网络检查并显示吐司上Http请求

Question

我是非常新的离子，目前工作/学习与Ionic 2.我想显示一个用户下线时的敬酒。我目前能够做到这一点，如下面我的代码所示（每当用户离线时吐司显示）。然而，我想要做的是在http请求上显示敬酒（拉到刷新和无限滚动）。因此，即使已经加载数据，当用户试图通过无限滚动加载更多数据时刷新以显示吐司，然后他们会收到通知他们处于离线状态。

export class HomePage { 
    datas:any = []; 
    page:number =1; 
    connected: Subscription; 
    disconnected: Subscription; 

    constructor(private toast: ToastController, private network: Network, public navCtrl: NavController, private wpapi: Wpapi) { 
     this.getPosts(); 
    } 

    displayNetworkUpdate(connectionState: string){ 
     //let networkType = this.network.type 
     this.toast.create({ 
     message: `You are currently ${connectionState}, please re connect your data`, 
     duration: 3000 
     }).present(); 
    } 

    ionViewDidEnter() { 
      this.disconnected = this.network.onDisconnect().subscribe(data => { 
      console.log(data) 
      this.displayNetworkUpdate(data.type); 
      }, error => console.error(error)); 
    } 


    getPosts() { 

     //this.page = '1'; 
     //this.wpapi.index(this.page) 
     this.wpapi.index(1) 
     .subscribe(data => { 
      this.datas = data; 
      console.log(this.datas); 
     }); 
    } 

    loadMore(infiniteScroll) { 

     this.page++; 

     this.wpapi.index(this.page).subscribe(datas => { 
      // Loads posts from WordPress API 
      let length = datas["length"]; 

      if(length === 0) { 
      infiniteScroll.complete(); 
      return; 
      } 

      for (var i = length - 1; i >= 0; i--) { 
      this.datas.push(datas[i]); 
      } 

      infiniteScroll.complete(); 
     }); 
    } 

    doRefresh(refresher) { 
     this.wpapi.index(1) 
     .subscribe(data => { 
      this.datas = data; 
     refresher.complete(); 
     }); 
    } 

    ionViewWillLeave(){ 
     this.connected.unsubscribe(); 
     this.disconnected.unsubscribe(); 
    } 
} 

Answer 1

这就是我正在做的。在我的app.components我有连接订阅，使它离线或在线，所以如果用户下线，我保存一个conn布尔变量与假，如果在线我保存在我的localStorage真正的，并提出一个吐司说，它已离线（如果消失了在线无需提供祝酒）。

network.onDisconnect().subscribe(() => { 
    storage.set('conn', false); 
    let conoff = ToastCtrl.create({ 
     closeButtonText: 'Ok', 
     showCloseButton: true, 
     message: 'You're not connected to internet.', 
     position: 'top' 
    }); 

    conoff.present(); 
}); 

您可以创建一个服务要做到这一点，像

import { Injectable } from '@angular/core'; 
import { Storage } from '@ionic/storage'; 
import { ToastController, Platform } from 'ionic-angular'; 

@Injectable() 
export class Verificador { 

    constructor(public toast: ToastController, public storage: Storage, public platform: Platform) { 
    } 

    verifyConnection =(): Promise<boolean> => { 
     return new Promise<boolean>((res, rej) => { 
      this.storage.get('conn').then(conn => { 
       if (conn) { 
        res(true); 
       } else { 
        let t = this.toast.create({ 
         closeButtonText: 'Ok', 
         showCloseButton: true, 
         message: 'You can't do this without internet.', 
         position: 'top' 
        }); 

        t.present(); 
        res(false); 
       } 
      }) 
     }) 
    } 
} 

所以在每一个部件，页面进入，HTTP调用，您导入服务/供应商，并调用verifyConnection功能，如果它返回true，你只需让用户做它需要做的事情，如果它是假的，提供者将显示敬酒。

import { ConnVerification} from '../../../providers/ConnVerification'; 

@IonicPage() 
@Component({ 
    selector: 'your-page', 
    templateUrl: 'your-page', 
    providers: [ConnVerification] 
}) 

export class YourPage { 
    constructor(public verif: ConnVerification){} 

    myFunctionForSomething(){ 
    this.verif.verifyConnection().then(conn =>{ 
     if(conn){ 
     // DO YOUR CODE 
     } 
     // NO NEED FOR ELSE SINCE IT'S HANDLED ON PROVIDER 
    }) 
    } 
} 

希望它能帮助:)