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();

希望这会有所帮助：）

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

3 个答案: