Angular中如何合并多个RxJS订阅解决多接口数据无法同步获取的问题

当前写法里两个HTTP请求是完全独立的异步流，各自在subscribe回调里赋值组件变量，不存在统一的“等两个请求全部返回后再执行后续逻辑”的同步等待机制，只要后续逻辑需要同时用到subordinates和historyRec两个变量，就一定会出现某份数据还没拿到、时序不匹配的问题。

优先使用RxJS内置的forkJoin操作符实现，改动量极小，不需要重构现有服务层逻辑。

• 第一步：调整原有两个数据获取方法，去掉方法内部的subscribe调用，直接把HTTP请求的Observable返回出去
• 第二步：在ngOnInit中用forkJoin把两个请求流组合，等两个请求全部成功返回后，在同一个订阅回调里统一处理赋值和后续逻辑

改造后参考代码 #

// 从rxjs导入需要的操作符
import { forkJoin } from 'rxjs';

ngOnInit() {
  // 并行发起两个请求，等全部返回后统一处理
  forkJoin([
    this.getSubordinatesByAppUserId(this.appUserId),
    this.getHistoricalRecordsByUserId(this.appUserId)
  ]).subscribe(([subordinatesRes, historyRes]) => {
    // 这里执行时一定是两个接口都已经成功返回，可以同时拿到完整响应
    this.subordinates = subordinatesRes.body;
    this.historyRec = historyRes.body;
    console.log("test >>" + this.historyRec.length);
  });
}

getSubordinatesByAppUserId(id: string) {
  // 不再内部调用subscribe，直接返回请求流
  return this.appUserService.findByReportTo(id);
}

getHistoricalRecordsByUserId(id: string) {
  return this.jobPostingService.findHistoricalRecById(id);
}

• 请求性能和原写法完全一致：两个请求是并行发出的，不会因为组合操作增加额外的等待耗时
• 时序绝对可靠：只有两个请求全部成功返回时才会触发后续回调，不会出现单份数据未赋值的不同步问题
• 边界兼容简单：如果需要适配单个请求失败不影响整体流程的场景，只需要给每个独立的请求流通过管道加catchError兜底返回空值即可，不需要改动整体的订阅逻辑

• 不要用嵌套subscribe的方式实现同步：也就是等第一个请求返回后再在回调里发第二个请求，这种写法会让请求从并行变串行，显著拉长页面加载等待时间
• 不要在组件里写轮询判断两个变量是否都已赋值：这种写法逻辑冗余，还容易出现响应未回来时空值报错的问题

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