如何使用RxJS pipe过滤API响应中的嵌套属性数据？

你的代码没达到预期效果，问题出在两个关键点：

• tap操作符不负责转换流数据：tap仅用于执行副作用（比如打印日志、调试），它不会修改或替换流中传递的原始数据——所以不管你在tap里做什么过滤逻辑，subscribe最终拿到的还是完整的原始响应。
• filter方法的结果未赋值：data.activeAwards.filter(...)会返回过滤后的新数组，但你没有把这个新数组重新赋值给data.activeAwards，原对象的activeAwards自然还是原来的三个元素。

正确的做法是用map操作符（专门用于转换流中的数据），同时把catchError放到pipe内部（而不是subscribe之后）。

修正后的代码如下：

.pipe(
  map(data => {
    // 方式1：直接修改原对象的activeAwards（适合允许修改原始数据的场景）
    data.activeAwards = data.activeAwards.filter(award => award.status === 'valid');
    return data;

    // 方式2：返回新对象（更推荐，符合不可变数据原则，避免意外副作用）
    // return {
    //   ...data,
    //   activeAwards: data.activeAwards.filter(award => award.status === 'valid')
    // };
  }),
  catchError(error => {
    // 这里建议处理错误，比如返回默认值或抛出自定义错误
    console.error('请求出错:', error);
    return of({ activeAwards: [] }); // 用of返回可观察对象，防止流中断
  })
)
.subscribe(response => {
  console.log(response); // 此时会拿到仅包含status为valid的两个对象
});

补充说明：

• map操作符会接收原始API响应，返回转换后的新数据，这个新数据会被传递到subscribe回调中。
• 方式2使用扩展运算符创建新对象，不会修改原始数据，在React、Angular等框架中更安全，能避免因数据突变引发的意外问题。
• catchError必须放在pipe内部，且需返回一个Observable（比如of()），否则整个数据流会直接终止。

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