如何同时获取两个Observable的响应？Angular RxJS数据流处理问题

你的现有代码能成功获取每个公司的详情，但存在两个核心问题：

1. 丢失了原公司的关联信息，仅能拿到单独的详情数据
2. 详情是逐个输出的，没有把所有公司与对应整合成一个完整集合

解决方案代码 #

import { forkJoin, of } from 'rxjs';
import { mergeMap, map, catchError } from 'rxjs/operators';

ngOnInit(): void {
  const allCompanies$ = this.companiesService.getCompanies();

  const companiesWithDetails$ = allCompanies$.pipe(
    mergeMap(companies => {
      // 为每个公司创建「请求详情+合并原数据」的Observable
      const detailRequests = companies.map(company => 
        this.stocksService.getTickerDetails(company.ticker).pipe(
          // 将原公司属性与详情合并为一个对象
          map(details => ({ ...company, details })),
          // 可选：处理单个详情请求失败，避免整体流中断
          catchError(err => of({ ...company, details: null, error: err }))
        )
      );

      // 并行发起所有请求，等待全部完成后返回结果数组
      return forkJoin(detailRequests);
    })
  );

  companiesWithDetails$.subscribe(result => {
    console.log(result);
    // result是数组，每个元素包含原公司所有属性 + 对应详情字段
  });
}

方案逻辑说明 #

• 拿到公司数组后，遍历每个公司，为其创建获取详情的Observable，通过map把原公司数据和详情合并成一个对象
• 使用forkJoin并行处理所有详情请求，它会等待所有请求完成后，返回包含所有合并结果的完整数组
• 可选的catchError用来处理单个请求失败的场景，确保某一个公司的详情请求出错不会导致整个数据流中断

串行请求改造（可选） #

如果接口有请求频率限制，需要串行发起详情请求，可以把forkJoin替换为concat+toArray()：

import { concat } from 'rxjs';
import { toArray } from 'rxjs/operators';

// ...其他代码不变
return concat(...detailRequests).pipe(toArray());

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