RxJS zip操作符如何识别报错请求并保留符合条件的正常返回数据

核心思路是在每个独立的API请求层面捕获错误，将错误转换为普通值发射，避免单个子流报错直接中断整个合并流，具体实现如下：

1. 改造单个API请求，添加独立错误捕获 #

给每个请求单独加catchError，将错误包装为普通结构返回，确保子流不会抛出错误终止：

import { of } from 'rxjs';
import { catchError, map, zip } from 'rxjs/operators';

const firstAPIrequest = this.firstApi.getData().pipe(
  catchError(err => of({
    data: null,
    error: err,
    requestId: 'firstApi'
  }))
);
const secondAPIrequest = this.secondApi.getData().pipe(
  catchError(err => of({
    data: null,
    error: err,
    requestId: 'secondApi'
  }))
);

const combined = zip(firstAPIrequest, secondAPIrequest);

2. 合并后处理结果，区分请求状态 #

在map中可以自由判断每个请求的成功/失败状态，按需整理返回数据：

combined.pipe(
  map(([firstRes, secondRes]) => {
    return {
      // 保留正常返回的数据
      firstData: firstRes.data,
      secondData: secondRes.data,
      // 收集所有报错信息，可精准判断哪个请求出错
      errors: [firstRes.error, secondRes.error].filter(Boolean)
    }
  })
)

3. 订阅逻辑调整 #

此时除非整个合并流出现不可预期的全局异常，否则不会走到error回调，你可以优先处理报错提示，再用正常返回的数据继续业务流程：

combined.subscribe(
  (res) => {
    // 按需处理错误提示
    if (res.errors.length) {
      res.errors.forEach(err => {
        console.debug(`${err.requestId}请求失败`, err);
      })
    }
    // 即使有请求报错，依然可以用正常返回的数据处理业务
    this.handleData(res.firstData, res.secondData);
  },
  (globalErr) => {
    console.debug('全局流异常', globalErr);
  }
)

实现说明 #

RxJS的流默认遵循“出错即终止”的规则，zip操作符只要收到任意一个子流的error通知，就会直接终止整个合并流并抛出错误。我们在每个子流层面把error通知转换为正常的next通知（用of包装错误结构返回），就能让zip正常等待所有子流返回结果，完整保留所有请求的状态信息。

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