本文详解如何使用 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 调用的标准实践。
