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

Question

As per the Ionic documentation I could load Ionic LoadingController using this piece of code:

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

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

  });
}

This works fine if I am just making 1 ajax request. But I have 5 requests to be made and if I hide / show loading controller like this it leads to flickering of the screens.

Is there a way where I can present the loadingController but then dismiss() only when all of the Ajax requests have been completed?

EDIT: Requests do not depend upon one another. They are independent. What I am looking for is a way to get notified when all observable's request is completed. That way I could dismiss the LoadingController when all of them complete.

Answer 1

I'm using following utility in my app. This would also work for multiple steps or/and pages if we want to show the same loader and need to change loader text at different steps.

We can call showLoader() multiple times, would need to ultimately call 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

You should not use multiple subscribe, and if your requests do not depend on each other you can use the combineLatest operator, so all requests will execute concurently, and get notified when they have all completed :

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

You could chain all the requests inside every subscribe.

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

The way you're using the loader.dismiss() is not good, it'll call the someService.getLatestEntries and imediatelly use the dismiss, you need to use it inside the return of your promise/subscribe/observable so it only dismiss when the function is done.

Don't forget about adding an onError with every call, since it's 5 you don't want one to go wrong and then the user get stuck forever. So add it and inside of every onError add a loader.dismiss();

Hope this helps :)