在Angular中如何使用异步实现：两个HTTP请求均返回后再执行目标函数

你需要实现并行发起两个HTTP请求，等待两个请求都返回结果后再执行后续函数合并数据，现有代码的核心问题是：

• 给func1、func2添加的async关键字没有实际作用：RxJS的subscribe()方法返回的是订阅对象，不是Promise，不会等待HTTP请求完成就会继续执行后续代码
• func3会在两个请求发起后立刻调用，此时还没有拿到请求返回的data1和data2

Angular的HTTP请求默认返回RxJS Observable，最适配的方案是使用RxJS的forkJoin操作符，它会等待所有传入的Observable都完成后，统一返回所有请求的结果。

完整修改代码 #

// 先导入forkJoin
import { forkJoin } from 'rxjs';

ngOnInit(): void {
  this.getData();
}

getData() {
  // 并行发起两个请求，全部返回后才触发回调
  forkJoin([
    this.service.call1(),
    this.service.call2()
  ]).subscribe(([data1, data2]) => {
    // 按顺序存储两个请求的返回结果
    this.data1 = data1;
    this.data2 = data2;
    // 此时两个请求都已完成，再调用func3
    this.func3();
  });
}

func3() {
  // 这里已经可以正常使用data1和data2做合并处理
}

保留原有func1、func2结构的写法 #

如果你需要保留func1、func2的独立封装，可以调整为如下形式：

import { forkJoin } from 'rxjs';

ngOnInit(): void {
  this.getData();
}

getData() {
  forkJoin([this.func1(), this.func2()]).subscribe(([data1, data2]) => {
    this.data1 = data1;
    this.data2 = data2;
    this.func3();
  });
}

// 改为返回Observable，不在函数内部直接subscribe
func1() {
  return this.service.call1();
}

func2() {
  return this.service.call2();
}

func3() {
  // 业务逻辑
}

可选：async/await写法 #

如果你更习惯用async/await语法，可以把Observable转为Promise后配合Promise.all实现：

// Angular 12+ 推荐用firstValueFrom替代已废弃的toPromise
import { firstValueFrom } from 'rxjs';

ngOnInit(): void {
  this.getData();
}

async getData() {
  // 等待两个并行请求全部完成
  const [data1, data2] = await Promise.all([
    firstValueFrom(this.service.call1()),
    firstValueFrom(this.service.call2())
  ]);
  this.data1 = data1;
  this.data2 = data2;
  this.func3();
}

func3() {
  // 业务逻辑
}

• 优先选择forkJoin方案：和Angular的RxJS技术栈原生适配，后续可以很方便的拼接重试、防抖、请求取消等扩展逻辑
• async/await方案更适合习惯了Promise语法的场景，不需要额外学习RxJS操作符的用法

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