如何避免嵌套Subscribe，等待任意数量独立API调用完成？

你当前用嵌套subscribe的方式等待两个API调用完成，不仅嵌套层级冗余，还没法灵活扩展到更多API调用。RxJS的forkJoin操作符正好适配这种场景——它专门处理彼此独立、执行顺序不影响结果的Observable任务，只有当所有任务全部完成后，才会触发回调逻辑。

基础用法（两个API调用） #

直接把需要等待的API Observable放进数组，传给forkJoin即可：

import { forkJoin } from 'rxjs';

// 收集所有要执行的API Observable
const apiObservables = [
  this.service.apiCallOne(),
  this.service.apiCallTwo()
];

forkJoin(apiObservables).subscribe({
  next: ([resOne, resTwo]) => {
    // 可选：在这里处理每个API的返回结果
    console.log('both API calls are finished!');
  },
  error: (error) => {
    // 处理任意API调用失败的情况
    console.error('某个API调用失败:', error);
  }
});

扩展到任意数量API调用 #

如果后续需要增加更多API，只需往数组里添加对应的Observable即可，完全不用修改结构：

const apiObservables = [
  this.service.apiCallOne(),
  this.service.apiCallTwo(),
  this.service.apiCallThree(),
  this.service.apiCallFour()
];

forkJoin(apiObservables).subscribe(() => {
  // 不需要处理返回结果时，直接执行逻辑
  console.log('all API calls are finished!');
});

注意事项 #

• forkJoin会等待所有Observable都成功完成才会发出值，如果其中任意一个Observable报错，整个forkJoin会直接进入错误回调。如果需要单独处理每个API的错误，可以给每个Observable添加catchError：

  import { forkJoin, catchError, of } from 'rxjs';
  
  const apiObservables = [
    this.service.apiCallOne().pipe(catchError(err => of(null))), // 出错时返回null，不中断整个流程
    this.service.apiCallTwo().pipe(catchError(err => of(null)))
  ];
  
  forkJoin(apiObservables).subscribe(results => {
    console.log('all API calls are finished!');
    // results数组中会包含每个API的结果或null（如果对应API出错）
  });
  

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