HTTP POST请求中LoadingController无法正常工作的技术求助

问题背景 #

配置了两个Toast消息分别提示邮件发送成功/失败，测试Web表单时点击发送按钮后Toast显示有延迟，因此希望在用户点击按钮时启用LoadingController，待邮件发送完成或失败后关闭，但目前LoadingController在HTTP POST请求中无法正常工作。

问题分析 #

原代码核心问题：

• simpleLoader创建加载器后未保存实例引用，直接调用loadingCtrl.dismiss()无法精准定位当前显示的加载器
• 异步操作时序未处理，可能出现加载器未创建完成就发起请求、或关闭时找不到对应加载器的情况

修复后的代码 #

constructor(private http: HttpClient, private toastController: ToastController, private loadingCtrl: LoadingController) { }

async sendMail(formData){
  // 确保加载器完全显示后再发起请求
  await this.simpleLoader();
  return this.http.post('https://portfolio500.herokuapp.com/sendmail', formData).subscribe({
    next: async () => {
      await this.dismissLoader();
      await this.showToast('邮件发送成功');
    },
    error: async () => {
      await this.dismissLoader();
      await this.showToast('邮件发送失败');
    }
  });
}

async showToast(message: string){
  const toast = await this.toastController.create({
    message,
    duration: 4000,
    buttons: [ {
      text: 'X',
      role: 'cancel'
    }]
  });
  await toast.present();
}

private loadingInstance: HTMLIonLoadingElement;

async simpleLoader() {
  // 保存加载器实例
  this.loadingInstance = await this.loadingCtrl.create({
    message: '正在发送邮件'
  });
  await this.loadingInstance.present();
}

async dismissLoader() {
  // 检查实例存在后再关闭，避免错误
  if (this.loadingInstance) {
    try {
      await this.loadingInstance.dismiss();
      console.log('加载器已关闭');
    } catch (err) {
      console.log('关闭加载器出错:', err);
    }
    this.loadingInstance = null;
  }
}

关键修改说明 #

• 新增loadingInstance变量保存加载器实例，确保关闭的是当前显示的加载器
• 统一使用async/await语法，保证异步操作的执行顺序
• 在sendMail中先等待加载器显示，再发起HTTP请求
• 关闭加载器前先判断实例是否存在，避免无意义的报错

内容的提问来源于stack exchange，提问作者Samir