如何让for循环等待API数据返回后再执行下一轮循环

普通for循环执行时不会等待内部异步API请求完成，会直接跑完所有迭代，后续请求不会等前一个响应返回就直接发出，最终哪个请求先响应就先拿到结果，自然会出现顺序错乱。

要实现“上一个API返回后再执行下一轮循环”，最直接的方式是用async/await标记异步等待逻辑，注意不要用forEach/map这类数组遍历方法实现，这类方法本身不支持异步等待串行执行，必须用普通for循环或者for...of循环。

方案1：普通for循环 + await（推荐，逻辑直观） #

将包裹循环的方法标记为async，在API请求前加await，就可以让每轮循环卡住等待请求响应：

methods: {
  // 给方法加async标记
  async yourFunctionName() {
    // 这里写你的其他前置逻辑
    const orderedResults = [];

    for(let i = 0; i < array.length; i++) {
      // await会暂停当前循环执行，直到API请求返回结果后才进入下一轮
      const currentRes = await yourApiCall(array[i]); // 替换成你实际的API调用逻辑，需返回Promise
      orderedResults.push(currentRes);
    }

    // 循环执行完成后，orderedResults内的结果顺序和原数组完全一致
    console.log('按顺序返回的结果：', orderedResults);
  }
}

注意事项：

• 常用的请求库（比如axios、原生fetch）默认返回Promise对象，可以直接跟await搭配使用
• 如果是自己封装的请求方法，需要确保返回Promise才能正常触发等待

方案2：for...of循环写法（代码更简洁） #

如果不需要用到数组索引，用for...of写法更精简：

methods: {
  async yourFunctionName() {
    const orderedResults = [];
    for (const item of array) {
      const res = await yourApiCall(item);
      orderedResults.push(res);
    }
    return orderedResults;
  }
}

如果你的业务没有强制要求“必须等上一个请求完成才能发下一个”（例如下一个请求的参数不依赖上一个请求的返回值），不建议用串行等待的逻辑，否则总耗时会很长。可以一次性发出所有请求，给每个请求绑定对应的原数组索引，等所有请求返回后按索引重排，既能保证结果顺序正确，又能大幅缩短总请求耗时：

methods: {
  async fetchInParallel() {
    // 一次性发出所有请求，每个请求记录自己的原索引
    const reqList = array.map((item, index) => {
      return yourApiCall(item).then(data => ({ index, data }));
    });
    // 等待所有请求完成
    const allRes = await Promise.all(reqList);
    // 按原索引排序，得到顺序正确的结果
    const orderedResults = allRes
      .sort((a, b) => a.index - b.index)
      .map(item => item.data);
    return orderedResults;
  }
}

两种方案按业务需求选择：有前后依赖的请求选串行await方案，无依赖的请求选并行排序方案，性能更优。

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