服务调用场景下如何使用async/await等待响应完成？

你的问题核心是原代码用subscribe的异步回调模式不会阻塞后续执行，要用上async/await，得把RxJS的Observable转换成Promise——因为async/await是基于Promise的语法糖。

步骤1：改造GetAdditionalProducts函数 #

用RxJS的firstValueFrom（推荐，替代已弃用的toPromise()）把Observable转成Promise，同时完成赋值逻辑：

import { firstValueFrom } from 'rxjs'; // 先导入这个方法

async GetAdditionalProducts() {
  const response = await firstValueFrom(this.proposalService.getProductList(this.filter));
  this.additionalProducts = response.productList;
  return this.additionalProducts; // 可选，方便在onSearch里直接拿到结果
}

如果是旧版本RxJS（v6及以前），可以用toPromise()：

async GetAdditionalProducts() {
  const response = await this.proposalService.getProductList(this.filter).toPromise();
  this.additionalProducts = response.productList;
  return this.additionalProducts;
}

步骤2：在onSearch里用await等待结果 #

给onSearch加上async关键字，用await调用改造后的函数，后续代码就会等响应返回后再执行：

async onSearch() {
  await this.GetAdditionalProducts();
  // 这里的代码会等到请求完成后执行，此时this.additionalProducts已赋值
  // other stuff that requires the response from above function
}

额外：错误处理 #

如果需要捕获请求失败的情况，可以加try/catch：

async onSearch() {
  try {
    await this.GetAdditionalProducts();
    // 正常逻辑
  } catch (error) {
    console.error('获取产品列表失败:', error);
    // 这里写错误处理逻辑
  }
}

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