Ionic 4 Loadingcontroller 覆盖不存在答案

【问题标题】：Ionic 4 Loadingcontroller overlay doesnt existIonic 4 Loadingcontroller 覆盖不存在
【发布时间】：2019-12-23 12:38:24
【问题描述】：

我创建了一个像这样创建加载的简单函数

async presentLoading() {
  const loading = await this.loadingController.create({
    message: 'Please Wait...',
  });
  await loading.present();
}

当像这样获取数据时，我正在关闭加载器

  getUserData(){
  console.log(this.userID);
    this.api.getCompanyEmploye(this.userID).subscribe(res => {
     this.loadingController.dismiss(); //closing here 

      console.log(res);
      this.user = res.records[0];
      this.familyMembers = res.records[0].family_members;
    });
  }

我在构造函数中调用这两个函数

constructor(public loadingController: LoadingController){
  this.presentLoading();
  this.getUserData();
}

显示错误ERROR Error: Uncaught (in promise): overlay does not exist

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

问题是您的 API 调用响应比加载控制器实例化更快。您应该尝试以这种方式序列化它们，而不是并行调用：

让你的 presentLoading 方法返回 Promise：

async presentLoading() {
  const loading = await this.loadingController.create({
    message: 'Please Wait...',
  });
  return loading.present();
}

现在你可以这样称呼它：

getUserData(){
  this.presentLoading().then(()=>{
     this.api.getCompanyEmploye(this.userID).subscribe(res => {
        this.loadingController.dismiss(); //closing here 
        console.log(res);
        this.user = res.records[0];
        this.familyMembers = res.records[0].family_members;
    });
  })
}

在您的构造函数中，您只需要调用 API

【讨论】：

不知道为什么文档使用异步等待样式..它实际上使任何新来者感到困惑..哈哈

【解决方案2】：

对我来说，问题仅仅是因为我没有 .catch() 来表示承诺。正如@Sergey 建议的那样，这是因为调用离子加载器时加载器还没有准备好

this.loadingController.dismiss()
          .then(async () => {
            await this.setStorageForLocalData(data);
          })
          .catch(console.error);

.catch() 将消除错误

【讨论】：