如何在Ionic 2中为多个请求显示LoadingController

Question

根据Ionic文档，我可以使用以下代码加载Ionic LoadingController：

ionViewLoaded() {
  let loader = this.loading.create({
    content: 'Getting latest entries...',
  });

  loader.present().then(() => {
    this.someService.getLatestEntries()
      .subscribe(res => {
        this.latestEntries = res;
        loader.dismiss();
      });

  });
}

如果我只是发出1个ajax请求，这样可以正常工作。 但我有5个要求，如果我隐藏/显示加载控制器这样会导致屏幕闪烁。

有没有办法我可以提供loadingController，但只有当所有的Ajax请求都已完成时才dismiss()

EDIT:请求不依赖于彼此。 他们是独立的。 我正在寻找的是一种在所有可观察的请求完成时得到通知的方法。 这样，当所有这些都完成时，我可以解除LoadingController。

Answer 1

我在我的应用程序中使用以下实用程序。 如果我们想要显示相同的加载器并且需要在不同的步骤更改加载器文本，这也适用于多个步骤或/和页面。

我们可以多次调用showLoader（），最终需要调用hideLoader（）。

@Injectable()
export class Utility {
    loader: any = null;
    constructor(private _alertCtrl: AlertController,
        private _loadingController: LoadingController) {
    }

    private showLoadingHandler(message) {
        if (this.loader == null) {
            this.loader = this._loadingController.create({
                content: message
            });
            this.loader.present();
        } else {
            this.loader.data.content = message;
        }
    }

    private hideLoadingHandler() {
        if (this.loader != null) {
            this.loader.dismiss();
            this.loader = null;
        }
    }

    public showLoader(message) {
        this.showLoadingHandler(message);
    }

    public hideLoader() {
        this.hideLoadingHandler();
    }
}   

Answer 2

您不应该使用多个订阅，如果您的请求不相互依赖，则可以使用combineLatest运算符，因此所有请求都将以完整的方式执行，并在完成所有请求后得到通知：

ionViewLoaded() {
  let loader = this.loading.create({
    content: 'Getting latest entries...',
  });
  let loaded = Observable.combineLatest(
    this.someService.getLastEntries().do((entries) => {
      //do stuff with last entries
    }),
    this.someOtherServices.getOtherStuff().do((stuff) => {
      // do stuff with stuff
    })
    // etc...
  )
  loader.present().then(() => loaded.toPromise()).then(() => loader.dismiss());
}

Answer 3

您可以在每个订阅中链接所有请求。

ionViewLoaded() {
  let loader = this.loading.create({
    content: 'Getting latest entries...',
  });

  loader.present().then(() => {
    this.someService.getLatestEntries1()
      .subscribe(res => {
        this.latestEntries1 = res;
        this.someService.getLatestEntries2()
          .subscribe(res => {
            this.latestEntries2 = res;
            // OTHER CALLS ...
            this.someService.getLatestEntries5()
              .subscribe(res => {
                this.latestEntries5 = res;
                loader.dismiss();
              });
          });
      });
  });
}

你使用loader.dismiss()方式不好，它会调用someService.getLatestEntries并且使用dismiss，你需要在你的promise / subscribe / observable的返回中使用它，所以它只在功能完成了。

不要忘记在每次调用时添加一个onError ，因为它是5，你不希望出错，然后用户永远陷入困境。 所以添加它并在每个onError添加一个loader.dismiss();

希望这可以帮助 ：）