如何在RxJS中重构存在三个依赖Observable的函数？

这种前序Observable输出作为后序Observable入参的链式调用场景，直接使用RxJS提供的高阶映射操作符即可实现，不需要额外自定义复杂逻辑。

操作符选型 #

根据你的业务场景选择对应操作符即可：

• switchMap：前序Observable emit新值时，自动取消未完成的后续Observable请求，适合搜索联想、Tab切换等需要丢弃旧请求的场景
• concatMap：严格按前序Observable emit的顺序执行后续请求，前一个请求链未完成时后续请求排队，适合需要保证执行顺序的场景
• mergeMap（别名flatMap）：所有请求并行执行，不做取消或排队处理，适合无顺序要求的并行请求场景
• exhaustMap：前一个请求链未完成时，忽略前序Observable新emit的值，适合提交按钮防重复点击等场景

基础实现代码 #

假设三个Observable定义如下：

• firstObs$：第一个Observable，输出包含第二个请求所需ID的对象
• getSecondObs(id)：接收ID作为入参，返回第二个Observable
• getThirdObs(secondParam)：接收第二个Observable的输出作为入参，返回第三个Observable

示例代码：

import { switchMap } from 'rxjs/operators';

const finalResult$ = firstObs$.pipe(
  // 从第一个输出对象中提取所需ID传给第二个Observable
  switchMap(firstRes => getSecondObs(firstRes.requiredId)),
  // 第二个输出直接传给第三个Observable作为入参
  switchMap(secondRes => getThirdObs(secondRes))
);

// 订阅即可获取最终第三个Observable的输出
finalResult$.subscribe(thirdRes => {
  // 处理最终结果
});

多步返回值保留方案 #

如果后续步骤需要用到前面步骤的返回值，可以在内层管道中组合返回值：

const finalResult$ = firstObs$.pipe(
  switchMap(firstRes => 
    getSecondObs(firstRes.requiredId).pipe(
      map(secondRes => ({ firstRes, secondRes }))
    )
  ),
  switchMap(({ firstRes, secondRes }) => 
    getThirdObs(secondRes).pipe(
      map(thirdRes => ({ firstRes, secondRes, thirdRes }))
    )
  )
);

流程示意图 #

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