データベース接続が利用できない場合、タイムアウト後にローダーを終了する

Question

私のIonic 2/Angularモバイルアプリケーションでは、AngulaFire2を使用してFirebaseからデータを受信します。

通常、システムがまだ動作していることをユーザーに示すために、Firebaseからデータがフェッチされている間に、LoadControllerを追加します。データが正常に受信されるか、エラーが発生するとすぐに、ローダーは終了します。ただし、ユーザーがインターネットに接続されていない場合、ローダーは表示されなくなります。データが取得されず、エラーが発生しないため、ローダーは永遠に続きます。

タイムアウトを追加すると、数秒後にローダーが停止し、「接続なし」という警告が表示されます。その後、ユーザーは既にlocalstorageにロードされているデータを使用してアプリケーションを使用し続けることができます。

これをどのように実装すればよいか考えていただければ幸いです。これはサンプルコードです：

ionViewDidLoad() { 

    let loader = this.loadingCtrl.create({ 
     content: "Getting data..." 
    }); 

    loader.present().then(() => { 

     // get all products 
     this.productService.getAllProductsOnce().subscribe(data => { 
     this.allProducts = data; 
     loader.dismiss(); 

     }), error => { 
     loader.dismiss(); 
     this.errorService.handleError(error); 
     }; 
    } 
} 

Answer 1

あなたはRxJS- Timeout演算子を使用することができます。観察可能で（ミリ秒単位）指定した時間内に発生しません場合、これはエラーコールバックをヒットします：

this.productService.getAllProductsOnce() 
    .timeout(3000) 
    .subscribe(data => { 
     this.allProducts = data; 
     loader.dismiss(); 
    }, 
    error => { 
     loader.dismiss(); 
     this.errorService.handleError(error); 
    }); 

このオペレータのインポートを追加することを忘れないでください：

import 'rxjs/add/operator/timeout';