Angular 14中异步HttpClient调用为何无法等待响应？

问题 #

在Angular 14中使用async/await调用HttpClient的Get请求时，await未生效，返回的结果并非实际HTTP请求的响应。

服务代码：

export class ShopService {
  DYNAMIC_PROPERTY_GETALL_SELECT_ITEM_URL = environment.BASE_URL + 'DynamicProperty/GetAllSelecItem';

  constructor(private httpClient: HttpClient) {

  }

  async getAllDynamicProperties(): Promise<ApiResultModelDTO<SelectItemDTO>> {
    var result: ApiResultModelDTO<SelectItemDTO> = ApiResultModelDTO.GetNullModel<SelectItemDTO>();
    this.httpClient.get<ApiResultModelDTO<SelectItemDTO>>(this.DYNAMIC_PROPERTY_GETALL_SELECT_ITEM_URL)
      .subscribe({
        next: async (response: ApiResultModelDTO<SelectItemDTO>) => {
          result = response;
        },
        error: async () => {
          result = ApiResultModelDTO.GetNullModel<SelectItemDTO>();
        }
      });
    return result;
  }
 }

组件调用代码：

async loadDynamicProperties() {
  var result = await this.shopService.getAllDynamicProperties();
}

问题原因 #

• 方法标记了async但逻辑错误：初始化result为null模型后立刻返回，完全没有等待HTTP请求完成。
• subscribe是异步执行的，当请求返回结果时，方法早已把初始的result返回给调用方，后续修改result的值不会影响已返回的结果。
• 虽然方法返回了Promise（async自动包装），但这个Promise是立即resolve的，没有关联HTTP请求的异步过程。

修复方案 #

Angular的HttpClient返回的是Observable，可以用firstValueFrom（获取第一个值后完成）或lastValueFrom（获取最后一个值后完成）将其转为Promise，从而和async/await配合使用：

修改后的服务代码：

import { firstValueFrom } from 'rxjs'; // 导入rxjs的转换工具

export class ShopService {
  DYNAMIC_PROPERTY_GETALL_SELECT_ITEM_URL = environment.BASE_URL + 'DynamicProperty/GetAllSelecItem';

  constructor(private httpClient: HttpClient) {

  }

  async getAllDynamicProperties(): Promise<ApiResultModelDTO<SelectItemDTO>> {
    try {
      // 将Observable转为Promise，等待请求完成后返回响应
      const response = await firstValueFrom(
        this.httpClient.get<ApiResultModelDTO<SelectItemDTO>>(this.DYNAMIC_PROPERTY_GETALL_SELECT_ITEM_URL)
      );
      return response;
    } catch (error) {
      // 捕获请求错误，返回预设的null模型
      return ApiResultModelDTO.GetNullModel<SelectItemDTO>();
    }
  }
 }

组件调用代码无需修改，现在await会正确等待HTTP请求完成，拿到实际的响应结果。

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