JavaScript中如何等待多个subscribe Observable执行完成后运行其他代码

核心使用RxJS的forkJoin操作符实现，它会等待所有传入的Observable都完成后统一触发回调，具体实现步骤如下：

步骤1：调整请求写法，收集符合触发条件的请求 #

不要直接对每个http.post返回的Observable单独订阅，先根据用户输入判断是否需要触发对应请求，把需要执行的请求Observable存入待执行数组：

// 导入需要的依赖
import { forkJoin, Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

// 定义存储待执行请求的数组
const pendingRequests: Observable<any>[] = [];

// 示例：判断第一个请求是否需要触发
if (用户输入满足请求1触发条件) {
  // 仅创建Observable、不订阅，加入数组
  const req1 = this.http.post<any>(url1, body1).pipe(
    // 在这里写单个请求的处理逻辑，替代原来subscribe里的next
    tap(data => {
      console.log('请求1返回结果：', data);
    }),
    // 若需要单个请求报错不阻塞整体流程，添加catchError处理
    catchError(err => {
      console.error('请求1出错：', err);
      // 返回带错误标识的结果，让forkJoin继续等待其他请求
      return of({error: err, req: 'req1'});
    })
  );
  pendingRequests.push(req1);
}

// 其他请求同理判断，符合条件就加入pendingRequests数组
if (用户输入满足请求2触发条件) {
  const req2 = this.http.post<any>(url2, body2).pipe(
    tap(data => console.log('请求2返回结果：', data)),
    catchError(err => {
      console.error('请求2出错：', err);
      return of({error: err, req: 'req2'});
    })
  );
  pendingRequests.push(req2);
}

步骤2：组合所有待执行请求，统一订阅触发完成回调 #

if (pendingRequests.length === 0) {
  // 没有需要执行的请求，直接调用完成回调
  this.subscribesDone();
  return;
}

// 用forkJoin组合所有待执行请求
forkJoin(pendingRequests).subscribe({
  next: (allResults) => {
    // allResults是所有请求返回结果的数组，顺序和加入pendingRequests的顺序一致
    console.log('所有请求返回结果：', allResults);
  },
  complete: () => {
    // 所有请求执行完成后，调用目标函数
    this.subscribesDone();
  }
})

注意事项 #

• 如果要求所有请求都成功才执行subscribesDone()，可以去掉每个请求的catchError处理：只要有一个请求报错，forkJoin会直接进入error回调，不会执行complete逻辑
• 若在Angular等前端框架中使用，建议在页面/组件销毁时取消订阅，避免内存泄漏，可搭配takeUntil销毁信号Subject实现

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