Angular中如何使用Promise替代回调处理Observable异步返回结果

你可以通过RxJS提供的firstValueFrom方法将Observable转为Promise，配合async/await语法实现需求，具体修改如下：

步骤1：引入依赖 #

首先在Chart组件头部引入RxJS的firstValueFrom方法：

import { firstValueFrom } from 'rxjs';

注意：firstValueFrom 适用于RxJS 7+版本，如果你使用的是RxJS 6及更早版本，可以改用take(1)+toPromise()的写法，下文会补充说明。

步骤2：修改getApiResponse方法 #

将原来的回调传参改为返回Promise，等待取值和赋值完成后再执行后续逻辑：

// 方法定义
async getApiResponse(after: Function): Promise<void> {
  // 取Observable发射的第一个值，转为Promise等待完成
  const responseData = await firstValueFrom(this.transferService.receiveInfo());
  // 先执行赋值操作
  this.setApiResponse(responseData);
  // 赋值完成后执行传入的after函数
  after();
}

如果你的setApiResponse本身包含异步逻辑（比如本地存储写入、额外接口请求等），只需要将setApiResponse也改为返回Promise，然后await其执行完成即可：

// 改造后的setApiResponse示例
async setApiResponse(data: CountryAllData[]): Promise<void> {
  this.currentApiData = data;
  // 假设有异步存储操作
  await localStorage.setItem('apiData', JSON.stringify(data));
}

// 对应修改getApiResponse
async getApiResponse(after: Function): Promise<void> {
  const responseData = await firstValueFrom(this.transferService.receiveInfo());
  await this.setApiResponse(responseData);
  after();
}

步骤3：方法调用 #

你可以选择两种方式调用该方法：

• 用.then()链式调用：

this.getApiResponse(() => {
  console.log('赋值完成，执行后续逻辑');
});

• 在async函数中用await语法调用：

async yourBusinessMethod() {
  await this.getApiResponse();
  // 后续逻辑直接写在这里，不需要传回调
  console.log('赋值完成');
}

RxJS低版本兼容写法 #

如果你使用的是RxJS 6及更早版本，没有firstValueFrom方法，可以用take(1)操作符获取第一个值后转Promise：

// 引入take操作符
import { take } from 'rxjs/operators';

async getApiResponse(after: Function): Promise<void> {
  const responseData = await this.transferService.receiveInfo()
    .pipe(take(1))
    .toPromise();
  this.setApiResponse(responseData);
  after();
}

注意事项 #

Promise只能触发一次resolve，如果你需要每次apiResponse的值更新时都自动执行后续逻辑，还是推荐使用原来的subscribe订阅方式更合适。

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