Angular 11/RxJS如何等待两个observable完成并处理不同错误场景

问题根源 #

你之前尝试的所有组合操作符（forkJoin/concat/combineLatest）都遵循RxJS的标准错误传播规则：任意上游Observable抛出未捕获的错误时，整个组合流会立刻触发error回调，终止运行，不会等待其余未完成的上游。所以你只能拿到两种结果：两个请求全成功的返回值，或者第一个触发错误的请求的报错信息，不可能统计两个请求的成败状态。

解决思路 #

给每个请求单独添加错误捕获逻辑，把错误转换为正常的发射值，保证两个请求无论成功失败都会正常complete，再用组合操作符等待两个请求全部结束后统一处理状态。

实现代码 #

import { forkJoin, of, map, catchError } from 'rxjs';

// 统一封装请求的返回结构，无论成功失败都返回带状态标识的对象
const firstRequest$ = this.doFirstRequest(searchRequest).pipe(
  map(res => ({ success: true, data: res })),
  catchError(err => of({ success: false, error: err }))
);
const secondRequest$ = this.doSecondRequest(searchRequest).pipe(
  map(res => ({ success: true, data: res })),
  catchError(err => of({ success: false, error: err }))
);

// forkJoin会等待所有上游全部complete后才触发回调，满足「两个请求都结束再处理」的需求
forkJoin([firstRequest$, secondRequest$]).subscribe(([res1, res2]) => {
  const failCount = [res1, res2].filter(item => !item.success).length;

  // 对应需求4：第一个请求成功时执行逻辑
  if (res1.success) {
    console.log('第一个请求成功处理逻辑', res1.data);
  }
  // 对应需求5：第二个请求成功时执行逻辑
  if (res2.success) {
    console.log('第二个请求成功处理逻辑', res2.data);
  }

  // 对应需求2、3：错误提示处理
  if (failCount === 1) {
    console.log('仅一个请求失败的指定错误提示');
  } else if (failCount === 2) {
    console.log('两个请求全部失败的指定错误提示');
  }
});

方案适配说明 #

• 选择forkJoin而非combineLatest更贴合需求：forkJoin仅会在所有上游都complete后发射一次最终结果数组，完全匹配「等待两个请求全部结束再处理」的语义，避免combineLatest可能存在的多次触发问题（如果你的请求是只会发射一次的HTTP类冷Observable，两者效果一致）。
• 所有请求的错误都被提前捕获为正常返回值，不会穿透到组合流的error回调，你可以在subscribe的next回调中统一处理所有状态，无需额外处理error回调。

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