如何在JavaScript中使用异步循环实现有序的服务器请求？

API 探路者

2026-7-15

如何顺序发送异步请求并按序获取结果

你当前的代码会一次性触发所有fetch请求，因为fetch是异步操作，不会等待前一个请求的响应返回就执行下一次循环，导致请求并行发送，结果也可能乱序。要实现前一个请求收到响应后再发送下一个，同时保证请求和结果严格按顺序呈现，有两种常用方案：

方案一：使用`async/await`结合`for...of`循环

这是最直观易读的方案，利用async/await的异步等待特性，让循环每次等待当前请求完成后再执行下一次：

async function fetchSequentially() {
  const items = [1, 2, 3];
  for (const item of items) {
    try {
      // 等待当前请求完成
      const res = await fetch(`http://test.com/users/${item}`);
      // 解析响应为JSON（根据实际响应格式调整）
      const data = await res.json();
      // 按顺序输出结果
      console.log(data.id);
    } catch (err) {
      // 捕获请求或解析错误，避免单个请求失败中断整个流程
      console.error(`请求item ${item}失败:`, err);
    }
  }
}

// 执行函数
fetchSequentially();

方案二：构建Promise链式调用

如果运行环境不支持async/await，可以通过Promise链来实现顺序执行：

const items = [1, 2, 3];
// 初始化一个已完成的Promise作为链式调用的起点
let promiseChain = Promise.resolve();

items.forEach(item => {
  promiseChain = promiseChain.then(() => {
    return fetch(`http://test.com/users/${item}`)
      .then(res => res.json())
      .then(data => {
        console.log(data.id);
      })
      .catch(err => {
        console.error(`请求item ${item}失败:`, err);
        // 返回已完成的Promise，确保链式调用继续执行下一个请求
        return Promise.resolve();
      });
  });
});

两种方案都能保证：