JavaScript 中 async/await 怎么在循环中正确处理串行与并行的异步请求-js教程-PHP中文网

async/await本身不决定串行或并行，关键在await位置和promise创建时机：串行需每次循环await单个请求，如for...of中await；并行需先map生成promise数组再promise.all()。

javascript 中 async/await 怎么在循环中正确处理串行与并行的异步请求

在 JavaScript 中，async/await 本身不决定请求是串行还是并行，关键在于你如何组织 await 的位置和 Promise 的创建时机。搞错这一点，容易导致性能问题（该并行却串行）或逻辑错误（该串行却并行）。

串行执行：一个接一个，等前一个完成再发下一个

适用于有依赖关系、需按序处理、或服务端有频率限制的场景。核心是：每次循环都 await 当前请求的 Promise。

✅ 正确写法（for...of + await）：

async function fetchSerial(urls) {
  const results = [];
  for (const url of urls) {
    const res = await fetch(url);        // 等这个请求完成
    const data = await res.json();
    results.push(data);
  }
  return results;
}

⚠️ 常见错误（误用 forEach）：

urls.forEach(async (url) => {
  await fetch(url); // 这里的 await 只作用于当前回调，不会阻塞 forEach 循环
}); // 所有请求几乎同时发出 → 实际是并行，不是串行

并行执行：所有请求同时发起，最后统一等待结果

适用于彼此独立、追求速度的场景。关键是：先批量创建所有 Promise，再用 Promise.all() 一起 await。

✅ 正确写法（map + Promise.all）：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

async function fetchParallel(urls) {
  const promises = urls.map(url =>
    fetch(url).then(res => res.json())
  );
  return Promise.all(promises); // 一次等待全部完成
}

? 小技巧：如果某个请求失败不想让全部失败，可用 Promise.allSettled()：

const results = await Promise.allSettled(
  urls.map(url => fetch(url).then(r => r.json()))
);
const successful = results
  .filter(r => r.status === 'fulfilled')
  .map(r => r.value);

可控并行（如最多 3 个并发）

既不想全串行拖慢速度，又怕全并行压垮服务或触发限流。可用“批处理”或工具库（如 p-limit），手动实现也很清晰：

把 URL 数组切分成每组 N 个
对每组调用 Promise.all，再用 await 串行处理各组

示例（并发数为 3）：

async function fetchLimited(urls, limit = 3) {
  const results = [];
  for (let i = 0; i  fetch(u).then(r => r.json()));
    const batchResults = await Promise.all(batchPromises);
    results.push(...batchResults);
  }
  return results;
}