如何在 JavaScript 中使用异步循环按序发起 HTTP 请求

本文介绍如何通过 `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 驱动的循环，是编写健壮、可读性强的异步业务逻辑的基础能力。