如何在ionic-5中将离子加载扩展到页面渲染

Question

在显示UI屏幕之前，我必须进行3个后端api调用。因此，我使用了下面的离子加载代码片段，

我在第一个后端调用中呈现了加载器，但它在第一个调用中被关闭。但我必须在第三个api调用中关闭加载器才能显示屏幕。

如何将加载器扩展到最后一次api调用，

this.presentLoading();

 async presentLoading() {
    this.loading = await this.loadingController.create({
      spinner: null,
      cssClass: 'custom-class custom-loading',
    });
    await this.loading.present();
  }

Answer 1

要做到这一点，一种方法是在loadingController.create()上调用.then()，然后在那里处理所有的api调用。以下是我如何组织它，以便当3个api调用成功或其中一个失败时，您的加载控制器被适当地解除。此设置假定您的api调用函数返回承诺。

this.loadingController.create({
      message: 'Loading, please wait...'
    }).then((loading) => {

      loading.present();

      Promise.all([apiCallOne(), apiCallTwo(), apiCallThree()])
        .catch((err) => {
          console.log(err);
          loading.dismiss();
        })
        .then((results) => {
          // do something with results ...
          loading.dismiss();
        });

    });