RxJS：将多个HTTP请求结果合并为指定结构对象数组

首先修正你的urls数组，name属性的值需要用字符串包裹（否则p10会被当作未定义变量）：

const urls = [
  {name: 'p10', url: 'someUrl_10'},
  {name: 'p20', url: 'someUrl_20'},
  {name: 'p30', url: 'someUrl_30'}
];

接下来，你可以利用RxJS的forkJoin操作符并行处理所有HTTP请求，同时通过遍历数组生成每个请求的Observable，并映射成你需要的对象结构：

import { forkJoin } from 'rxjs';
import { map } from 'rxjs/operators';

// 遍历urls数组，生成每个请求的Observable
const requestObservables = urls.map(item => {
  return this.http.get<any>(item.url).pipe(
    // 用计算属性名将结果映射为指定结构的对象
    map(response => ({
      [item.name]: response.results
    }))
  );
});

// 合并所有请求，订阅后得到最终结果
forkJoin(requestObservables).subscribe(results => {
  // results就是你想要的结构：[{p10: [...]}, {p20: [...]}, {p30: [...]}]
  console.log(results);
});

补充说明： #

• forkJoin会等待所有Observable都完成后，将每个Observable的返回值按顺序组成数组返回，完全匹配你需要的results结构。
• 计算属性名[item.name]可以动态设置对象的属性名，对应每个URL项的name字段。
• 如果需要处理单个请求的错误，避免单个请求失败导致整个forkJoin终止，可以在每个请求的pipe中添加catchError操作符：

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

const requestObservables = urls.map(item => {
  return this.http.get<any>(item.url).pipe(
    map(response => ({
      [item.name]: response.results
    })),
    catchError(error => {
      // 自定义错误处理逻辑，比如返回空值或错误信息
      return of({ [item.name]: null });
    })
  );
});

forkJoin(requestObservables).subscribe(results => {
  console.log(results);
});

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