RxJS：如何用操作符处理依赖同一Observable值的多独立请求

你的场景不需要特殊的复合操作符，用RxJS的tap操作符或者基于共享ID流的方式就能完美解决，既保证ID获取后触发三个独立请求，又能让你分别订阅每个请求的结果。

方案一：用tap触发即时订阅 #

tap操作符可以在source_id发射ID值时执行副作用逻辑，直接在这里创建并订阅三个独立请求：

import { tap } from 'rxjs/operators';

// 定义接收ID并返回Observable的请求函数
const fetchDataA = (id: string) => <你的异步请求A>;
const fetchDataB = (id: string) => <你的异步请求B>;
const fetchDataC = (id: string) => <你的异步请求C>;

const source_id = <获取ID的异步请求>;

// 监听ID发射，触发三个独立请求
source_id.pipe(
  tap(id => {
    // 创建每个请求的Observable并独立订阅
    fetchDataA(id).subscribe(dataA => {
      // 处理请求A的结果
    });
    fetchDataB(id).subscribe(dataB => {
      // 处理请求B的结果
    });
    fetchDataC(id).subscribe(dataC => {
      // 处理请求C的结果
    });
  })
).subscribe(); // 必须订阅source_id才能启动整个流程

方案二：共享ID流，灵活控制订阅时机 #

如果你想把请求的创建和订阅逻辑分离，或者需要在组件不同生命周期订阅请求，可以先把ID流共享缓存，再让三个请求分别依赖这个ID流：

import { shareReplay, switchMap } from 'rxjs/operators';

const source_id = <获取ID的异步请求>;
// 缓存ID结果，确保多个订阅者共享同一次ID请求的结果
const cachedId$ = source_id.pipe(shareReplay(1));

// 每个请求都基于缓存的ID流创建
const sourceA$ = cachedId$.pipe(switchMap(id => <你的异步请求A(id)>));
const sourceB$ = cachedId$.pipe(switchMap(id => <你的异步请求B(id)>));
const sourceC$ = cachedId$.pipe(switchMap(id => <你的异步请求C(id)>));

// 独立订阅每个请求，可在任意时机执行
sourceA$.subscribe(dataA => { /* 处理A的结果 */ });
sourceB$.subscribe(dataB => { /* 处理B的结果 */ });
sourceC$.subscribe(dataC => { /* 处理C的结果 */ });

为什么不用合并类操作符？ #

像forkJoin、combineLatest这类操作符的作用是合并多个Observable的结果并统一返回，但你的需求是保持三个请求独立、分别处理各自的订阅逻辑，因此这类合并型操作符并不适配你的场景。上面两种方式既保证了ID与后续请求的依赖关系，又完全保留了每个请求的独立性。

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