Angular循环调用接口时如何等待订阅完成保证数据插入顺序

核心利用RxJS的特性保证结果和原始参数数组顺序一致，无需调整API请求并发逻辑，符合你允许多次调用接口的要求。

推荐方案：使用forkJoin批量处理请求 #

forkJoin传入Observable数组时，返回的结果顺序和传入的Observable顺序完全一致，和接口响应快慢无关，是最稳妥的实现方式：

let parameterArray = ["a", "b", "c"];
let finalData = [];

// 1. 把参数数组映射为请求Observable数组，提前做每个请求的返回数据转换
const requestList = parameterArray.map(parameter => {
  const tmpValue = /* 原有parameter数据转换逻辑 */
  return this.apiService.getApiData(tmpValue).pipe(
    map(apiResponse => {
      // 原有transformedData数据处理逻辑
      return transformedData;
    })
  )
})

// 2. 批量执行所有请求，返回结果顺序和参数数组顺序完全对应
forkJoin(requestList).subscribe(sortedResult => {
  finalData = sortedResult;
  // 后续处理finalData的逻辑写在这里即可
})

注：你原有代码中给单个Observable包forkJoin()是无意义的用法，可直接省略。

兼容原有循环的修改方案 #

如果你不想大幅改动现有写法，可直接通过索引赋值替代push，保证每个结果对应自己的位置：

let parameterArray = ["a", "b", "c"];
let finalData = [];

parameterArray.forEach((parameter, index) => {
  let tmpValue = /* 原有parameter数据转换逻辑 */
  this.apiService.getApiData(tmpValue).subscribe(response => {
    let transformedData = /* 原有数据转换逻辑 */
    // 按索引赋值，而非push，无需等待其他请求完成也能保证顺序
    finalData[index] = transformedData;
  })
})

注意：该方案需要自行判断所有请求都完成后才能使用finalData，否则数组可能存在空值，更推荐第一种forkJoin方案。

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