RxJS forkJoin 批量发起的HTTP请求未并发执行的排查求助

核心问题排查方向 #

你感知到请求没有按并发执行，可以按以下顺序逐点定位：

• 确认请求层的实现逻辑：检查getCaptureData方法对应的HTTP客户端、全局请求拦截器，是否存在串行化排队逻辑（比如给所有请求加了全局互斥锁、强制按顺序等待前一个请求完成才发下一个）——这类逻辑会绕过forkJoin的并发能力，哪怕Observable是同时被订阅的，实际请求发出时已经被拦截器排队。
• 排查浏览器同域请求限制：如果所有请求都指向同一个域名，浏览器对同域的并发TCP连接数有硬性上限（主流浏览器一般为6个），当你的站点数量超过这个阈值时，超出的请求会被浏览器放进待发送队列，按顺序逐个发出，这种是浏览器规范的正常表现，不是RxJS的逻辑问题。
• 校准你的并发判断标准：forkJoin对冷的HTTP Observable的并发触发逻辑是——在订阅的同一时刻，调用所有传入Observable的订阅方法。你可以在每个请求的发起位置加日志验证：如果所有请求的“发起调用”日志在同一时间点输出，说明并发触发逻辑是正常的，后续感知到的“顺序执行”大概率是请求返回时间有先后、或者前面说的浏览器排队导致的，不是实际的请求触发顺序问题。

现有代码的常见问题 #

• 嵌套订阅的风险：在sites$的回调里直接订阅forkJoin的结果，属于典型的嵌套Observable流，一旦sites$是长期存续的源（比如来自路由参数变化、全局状态更新的可观察对象），很容易出现旧订阅没有销毁、重复触发请求的问题。
• 状态更新时机混乱：在循环遍历站点数组的时候就提前初始化了siteCaptureMap的内容，没有和最终请求结果绑定，容易出现状态和数据错位的问题。
• 缺少错误兜底：forkJoin的特性是只要数组里任意一个Observable抛错，整个forkJoin就会直接终止，其他已经发出的请求结果都会被丢弃，最终界面上的数据会出现缺失。
• 变量声明不规范：使用var声明循环索引，存在变量提升的潜在闭包问题，不符合TypeScript的最佳实践。

优化后的参考实现 #

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

// 把两层异步逻辑串为单一数据流，避免嵌套订阅
this.sites$.pipe(
  switchMap(sitesData => {
    // 空数据直接兜底，跳过无意义的请求流程
    if (!sitesData?.length) {
      this.dataSource.data = [];
      this.dataSource.filteredData = [];
      return of({ captureResults: [], sites: sitesData });
    }

    // 批量初始化站点映射，避免循环零散操作全局状态
    this.siteCaptureMap = {};
    sitesData.forEach((site, index) => {
      this.siteCaptureMap[site.id] = new CaptureData();
      this.siteCaptureMap[site.id].id = index;
    });

    // 生成并发请求数组，单个请求失败时返回空结果，不影响整体流程
    const captureRequestList = sitesData.map(site => 
      this.sitesService.getCaptureData(site.nameOrNumber, site.owner.name).pipe(
        catchError(() => of([]))
      )
    );

    // 并发执行所有捕获数据请求
    return forkJoin(captureRequestList).pipe(
      map(results => ({ captureResults: results, sites: sitesData }))
    );
  })
).subscribe(({ captureResults, sites }) => {
  // 统一更新站点捕获计数
  captureResults.forEach((result, index) => {
    const currentSiteId = sites[index].id;
    this.siteCaptureMap[currentSiteId].count = result.length;
  });
  // 更新表格数据源
  this.dataSource.data = sites;
  this.dataSource.filteredData = sites;
});

内容的提问来源于stack exchange，提问作者mitch.lotierzo