如何按顺序执行多个Fetch API调用并保证返回数据顺序一致？

原代码使用forEach遍历数组时，所有fetch请求会被立即并行发起，响应返回的时间不确定，导致结果存入数组的顺序混乱。以下两种方案可解决问题：

1. 串行执行API调用（逐个发起请求） #

如果需要严格按数组顺序依次发起API请求，可使用async/await配合for...of循环（forEach无法阻塞异步操作）：

async function fetchDataSequentially() {
  const fullDataArr = [];
  for (const option of sizeOptionsArr) {
    const storeAPI = `https://api-url/json/store-stock-lookup?productCode=${option}`;
    const res = await fetch(storeAPI);
    const data = await res.json();
    fullDataArr.push(data.data);
  }
  // fullDataArr顺序与sizeOptionsArr完全一致
  console.log(fullDataArr);
}

// 执行函数
fetchDataSequentially();

for...of会等待每个异步请求完成后再执行下一次迭代，确保请求和结果顺序完全匹配原数组。

2. 并行执行API调用但保证结果顺序（效率更高） #

若无需严格串行发起请求，仅需最终结果顺序与原数组一致，可使用Promise.all。这种方式所有请求同时发起，响应返回后自动按原顺序整理结果，执行效率更高：

// 将每个尺寸转换为对应的请求Promise
const promiseArr = sizeOptionsArr.map(option => {
  const storeAPI = `https://api-url/json/store-stock-lookup?productCode=${option}`;
  return fetch(storeAPI)
    .then(res => res.json())
    .then(data => data.data);
});

// 等待所有请求完成，结果数组顺序与原数组一致
Promise.all(promiseArr)
  .then(fullDataArr => {
    console.log(fullDataArr);
  })
  .catch(err => {
    console.error('请求出错:', err);
  });

Promise.all返回的结果数组顺序，始终与传入的Promise数组顺序一致，不受响应返回时间影响。

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