如何在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();

希望這可以幫助 ：）