本文介绍如何通过 `async/await` 实现串行异步循环，确保每个 `fetch` 请求在前一个响应返回后再发起，并保持执行与输出顺序一致。
在 JavaScript 中，传统的 for...of 循环配合 .then() 会立即触发所有请求（并发执行），导致响应顺序不可控，无法满足“前一个完成后再发下一个”的需求。正确做法是将循环置于 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 error! status: ${response.status}`);
}
const userData = await response.json();
console.log(`User ${id}:`, userData.id); // 确保按 1 → 2 → 3 顺序输出
} catch (error) {
console.error(`Failed to fetch user ${id}:`, error.message);
}
}
}
// 调用函数
fetchUsersInOrder();✅ 关键要点：
- await 只能在 async 函数内部使用；
- await fetch(...) 会暂停当前 for 循环的执行，直到该请求完成并解析为 Response 对象；
- 若需提取 JSON 数据，需再次 await response.json()（因为 .json() 本身也返回 Promise）；
- 强烈建议包裹 try...catch，避免单个请求失败导致整个循环中断。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 此方式为串行请求，总耗时 ≈ 各请求耗时之和，适用于依赖顺序或服务端有频率限制的场景；
- 如需兼顾性能与顺序（例如先并发请求、再按序处理），可考虑 Promise.allSettled() + 排序，但逻辑更复杂；
- 浏览器环境需确保目标 API 支持 CORS，Node.js 环境则需使用 node-fetch 或 undici 等兼容库。
掌握 async/await 驱动的循环，是编写健壮、可读性强的异步业务逻辑的基础能力。
