RxJS 如何在forkJoin中优雅发起依赖其内部请求结果的接口请求

方案1：保留原有请求并行逻辑，消除嵌套订阅 #

如果你的业务需要等三个并行请求全部返回后再统一处理状态，可以直接用switchMap高阶操作符改造，避免嵌套订阅，同时推荐使用对象形式的forkJoin（RxJS 7+支持）替代数组索引取值，可读性更高：

import { forkJoin, switchMap, map } from 'rxjs';

forkJoin({
  course: this.service.requestNumber1(...),
  students: this.service.requestNumber2(...),
  lessonLength: this.service.requestNumber3(...)
}).pipe(
  // 拿到students后发起依赖请求，同时透传原有forkJoin的所有结果
  switchMap(baseRes => this.service.innerRequestIWantToReplace(baseRes.students).pipe(
    map(innerRes => ({ ...baseRes, innerData: innerRes }))
  ))
).subscribe(allRes => {
  this.course = allRes.course;
  this.students = allRes.students;
  this.lessonLengthInMinutes = allRes.lessonLength;
  this.iNeedStudentsForThis = allRes.innerData;
});

方案2：优化请求时序，提前发起依赖请求 #

如果requestNumber1、requestNumber3的返回结果不影响内部请求的发起，可以单独拆分students请求流，不需要等另外两个请求返回就可以发起内部请求，减少整体等待耗时：

import { forkJoin, shareReplay, switchMap } from 'rxjs';

// 单独抽离students请求，用shareReplay复用结果避免重复发起请求
const students$ = this.service.requestNumber2(...).pipe(shareReplay(1));
// 内部请求流，students返回后立即发起，无需等待另外两个请求
const innerData$ = students$.pipe(
  switchMap(students => this.service.innerRequestIWantToReplace(students))
);
// 原有三个并行请求的基础数据流
const baseData$ = forkJoin({
  course: this.service.requestNumber1(...),
  students: students$,
  lessonLength: this.service.requestNumber3(...)
});

// 所有流返回后统一处理，也可以单独订阅innerData$提前处理依赖students的逻辑
forkJoin({ baseData: baseData$, innerData: innerData$ }).subscribe(res => {
  this.course = res.baseData.course;
  this.students = res.baseData.students;
  this.lessonLengthInMinutes = res.baseData.lessonLength;
  this.iNeedStudentsForThis = res.innerData;
});

注意事项 #

• 操作符选择：如果需要在流切换时自动取消未完成的请求（比如页面离开场景），优先使用switchMap；如果需要严格按顺序执行可以用concatMap，无顺序要求可直接用mergeMap。
• shareReplay的作用：抽离独立的students$流后，多处订阅只会发起一次网络请求，复用返回结果，避免重复请求。
• 错误处理：可以按需在pipe中添加catchError处理单个请求的异常，避免单个请求报错导致整个流终止。

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