如何将Observable.forkJoin()的响应结果与对应请求URL一一映射

实现思路 #

• 遍历URL生成Observable时，通过RxJS的map操作符将响应结果与对应URL绑定为结构化数据
• forkJoin拿到所有结果后，通过reduce或数组遍历聚合为key为URL、value为响应的对象/Map

代码实现 #

生成普通对象 #

import { map } from 'rxjs';

// 改造Observable生成逻辑，将URL和响应绑定
const observables = urls.map(url => 
  myPipe.transform(url).pipe(
    map(response => ({ url, response }))
  )
);

// 聚合为URL-响应映射对象
forkJoin(observables).subscribe(results => {
  const urlResponseMap = results.reduce((acc, curr) => {
    acc[curr.url] = curr.response;
    return acc;
  }, {} as Record<string, any>); // 可将any替换为你的实际响应类型
  console.log(urlResponseMap);
});

生成原生Map对象 #

如果需要使用Map结构，只需修改聚合逻辑即可：

forkJoin(observables).subscribe(results => {
  const urlResponseMap = new Map(results.map(item => [item.url, item.response]));
  console.log(urlResponseMap);
});

异常兼容方案 #

forkJoin默认只要有一个请求抛出错误就会终止整个流，如果需要兼容部分请求失败的场景，可给每个请求添加错误处理：

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

const observables = urls.map(url => 
  myPipe.transform(url).pipe(
    map(response => ({ url, response, success: true })),
    catchError(error => of({ url, response: error, success: false }))
  )
);

处理后即使部分请求失败，也能将错误信息存入对应URL的映射位，不会中断整体结果返回。

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