如果没有可用的数据库连接，则在超时后关闭加载程序

Question

在我的 Ionic 2 / Angular 移动应用程序中，我使用 AngulaFire2 从 Firebase 接收数据。

通常，我会在从 Firebase 获取数据时添加一个 LoadingController，以向用户显示系统仍在运行。一旦成功接收到数据或发生错误，加载器就会被关闭。但是，如果用户未连接到 Internet，则加载程序将永远不会停止显示 - 永远持续下去，因为不会获取任何数据，也不会发生任何错误。

我想添加一个超时，它会在几秒钟后停止加载程序并显示警报 "no connection"。然后用户可以继续使用已加载到本地存储的数据的应用程序。

任何关于如何实现这一点的想法都将不胜感激。这是一个示例代码：

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 运算符。如果 Observable 没有在指定的时间内（以毫秒为单位）触发，这将触发错误回调：

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

不要忘记为此运算符添加导入：

import 'rxjs/add/operator/timeout';

如果没有可用的数据库连接，则在超时后关闭加载程序

Dismissing loader after timeout, if no database connection available

firebase

ionic-framework

ionic2

angularfire2

angular