如何在 JavaScript 中实现异步顺序循环请求

本文详解如何使用 async/await 在 javascript 中实现按序发起 http 请求，确保前一个请求完成后再执行下一个，避免并行竞争与乱序问题。

在 javaScript 中，传统 for…of 循环配合 .then() 会并发执行所有请求——即一次性触发 fetch(1)、fetch(2)、fetch(3)，响应返回顺序取决于网络延迟，无法保证执行与输出顺序一致。要实现「串行请求、顺序响应、结果有序打印」，必须将循环置于 async 函数中，并使用 await 暂停每次迭代，等待当前 promise 完成后再进入下一轮。

✅ 正确写法如下：

async function fetchUsersInOrder() {   const ids = [1, 2, 3];   for (const id of ids) {     try {       const response = await fetch(`http://test.com/users/${id}`);       if (!response.ok) throw new Error(`HTTP ${response.status}`);        const data = await response.json(); // 注意：fetch 返回 Response 对象，需 .json() 解析       console.log(data.id); // ✅ 严格按 1 → 2 → 3 顺序输出     } catch (error) {       console.error(`Failed to fetch user ${id}:`, error.message);       // 可选择 continue（跳过错误项）或 re-throw（中断整个流程）     }   } }  fetchUsersInOrder();

? 关键要点：

• await 只能在 async 函数内部使用；
• fetch() 返回 Promise，await 会暂停循环直到该 Promise settled（fulfilled 或 rejected）；
• 建议始终 await response.json()（或其他解析方法），否则 res.id 会报错（Response 对象无 id 属性）；
• 使用 try/catch 包裹每个请求，增强健壮性，避免单个失败导致整个循环中断（除非业务要求强一致性）。

⚠️ 注意事项：

立即学习“Java免费学习笔记（深入）”；

• 此方式牺牲了并发性能（总耗时 ≈ 各请求耗时之和），若顺序非强制要求，可考虑 Promise.all() 并行处理后按 ID 排序；
• 不要误用 for await…of（适用于 async iterable，如 Readablestream），此处普通数组不适用；
• 确保运行环境支持 ES2017+（现代浏览器及 node.js ≥ 8.0 均支持）。

总结：async/await + for…of 是实现可控串行异步操作最清晰、可读性最强的模式，既避免回调地狱，又杜绝 .then() 链式陷阱，是处理依赖顺序的 API 调用的标准实践。