Angular中如何存储循环多API调用的每个响应？

错误原因分析 #

• 模板字符串语法错误：你用了单引号'apicallwith/${i}'，模板字符串必须用反引号`包裹，否则${i}不会被解析为变量值，所有请求都会发送到同一个固定URL，自然返回相同结果。
• 错误在map内订阅Observable：this.http.get()返回的是Observable，但你在map里直接调用.subscribe()，这会把Observable转换成Subscription对象，而forkJoin需要接收的是Observable数组，无法处理Subscription，导致逻辑完全错误。
• 响应收集方式错误：你在每个请求的subscribe里重新创建allResponses，就算前面逻辑正确，这里也只能拿到单个请求的响应，无法收集所有结果。

修正后的代码 #

const myIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 19];

// 生成对应每个ID的API请求Observable数组
const requestObservables = myIds.map((i: number) => 
  this.http.get(`apicallwith/${i}`) // 用反引号解析模板字符串，替换变量i
);

// 用forkJoin合并所有请求，等待全部完成后获取完整响应数组
forkJoin(requestObservables).subscribe((allResponses) => {
  console.log(allResponses); // 数组顺序与myIds一致，包含所有ID的响应结果
});

额外处理：单个请求失败的容错 #

如果需要避免某个请求失败导致整个forkJoin终止，可以给每个请求添加错误捕获：

import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

const requestObservables = myIds.map((i: number) => 
  this.http.get(`apicallwith/${i}`).pipe(
    catchError((error) => {
      console.error(`ID ${i} 请求失败:`, error);
      return of(null); // 返回null占位，不影响其他请求结果
    })
  )
);

forkJoin(requestObservables).subscribe((allResponses) => {
  console.log(allResponses); // 失败的请求位置会显示null
});

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