异步函数执行异常：弹窗受GetAllItems响应延迟影响的解决问询

我有一个用于显示弹窗的函数，该弹窗会延迟数秒才出现。移除this.service.GetAllItems()函数后，弹窗会立即显示，因此我想修改代码，让弹窗的显示不依赖于GetAllItems()的服务器响应时间。

相关代码如下：

弹窗逻辑代码：

await this.service.GetAllItems(e.show).then(async Oldest => {
  this.service.GetItemId(e.showID).subscribe(x => {
    let a = x;
    this.dialog.closeAll();
    return this.dialog.open(InformationComponent, {
      data: { name: a, All: ShowAll, lang: this.TheLang }
      , panelClass: 'custom-dialog-container'
    });
  });
});

GetAllItems()函数代码：

async GetAllItems(e: any) {
  try {
      const response = await this.http.get<Items[]>(this.baseUrl + 'Items/GetWell=' + e.toString()).toPromise();
      return response;
  } catch (err) {
      console.log(err);
  }
}

当前写法仍未生效，即便GetAllItems()是异步函数，弹窗依旧会延迟出现。请问该如何修改代码实现异步执行？

核心问题是你用了await等待GetAllItems()完成，才会执行后续的弹窗逻辑，导致弹窗被请求阻塞。要让弹窗独立执行，只需把GetAllItems()的调用和弹窗逻辑彻底分开，不让弹窗逻辑等待它完成。

修改后的代码 #

// 让GetAllItems在后台异步执行，不阻塞弹窗逻辑
this.service.GetAllItems(e.show).catch(err => console.log(err));

// 直接执行弹窗相关逻辑，无需等待GetAllItems
this.service.GetItemId(e.showID).subscribe(x => {
  let a = x;
  this.dialog.closeAll();
  this.dialog.open(InformationComponent, {
    data: { name: a, All: ShowAll, lang: this.TheLang },
    panelClass: 'custom-dialog-container'
  });
});

额外优化建议（非核心问题） #

如果你的项目使用Angular 12及以上版本，推荐用firstValueFrom替代已废弃的toPromise()，优化GetAllItems()函数：

import { firstValueFrom } from 'rxjs';

async GetAllItems(e: any) {
  try {
      const response$ = this.http.get<Items[]>(`${this.baseUrl}Items/GetWell=${e.toString()}`);
      return await firstValueFrom(response$);
  } catch (err) {
      console.log(err);
  }
}

逻辑说明 #

• 原代码中await强制等待GetAllItems()的请求返回，才会进入.then()执行弹窗逻辑，这是弹窗延迟的根本原因。
• 修改后，GetAllItems()会在后台独立发起请求，完全不影响弹窗逻辑的执行，弹窗会立刻触发GetItemId()并显示，彻底摆脱对GetAllItems()响应时间的依赖。

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