JavaScript 中如何通过 async/await 实现异步任务的串行化-js教程-PHP中文网

async/await 通过顺序书写多个 await 实现异步任务串行执行，每个 await 等待前一个 promise settled 后再执行下一个，适用于有依赖、限流或需避免服务端压力的场景。

javascript 中如何通过 async/await 实现异步任务的串行化

async/await 本身就能自然实现异步任务的串行执行，关键在于让 await 依次等待每个 Promise 完成，而不是并发发起多个请求。

串行执行的核心写法

把多个 await 语句按顺序写在同一个 async 函数中，JavaScript 会自动暂停后续代码，等前一个 Promise settled 后再继续执行下一行。

每个 await 后面跟一个 Promise（如 fetch、setTimeout 封装、或自定义异步函数）
不使用 Promise.all、Promise.race 等并发方法
避免在 await 前就调用多个异步函数（比如不要写成 await fn1(), await fn2() —— 这样 fn2 会在 fn1 返回 Promise 后立刻执行，不是真正串行）

常见串行场景示例

比如依次获取用户信息、订单列表、地址详情：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

async function loadUserData() {
  const user = await fetch('/api/user').then(r => r.json());
  const orders = await fetch(`/api/orders?uid=${user.id}`).then(r => r.json());
  const address = await fetch(`/api/address?uid=${user.id}`).then(r => r.json());
  return { user, orders, address };
}

三步严格按顺序执行：拿到 user 后才请求 orders，拿到 orders 后才请求 address。

需要动态串行时用循环控制

当任务数量不确定（例如处理一个 ID 数组），用 for...of 或 for 循环配合 await 即可：

for...of 是最直观的选择，天然支持 await
避免用 forEach + async 回调 —— 它不会等待，仍是并发
如果需错误中断，可加 try/catch 包裹单次 await

async function processIds(ids) {
  const results = [];
  for (const id of ids) {
    try {
      const data = await fetch(`/api/item/${id}`).then(r => r.json());
      results.push(data);
    } catch (err) {
      console.warn(`Failed on ${id}:`, err);
      // 可选择 continue 或 throw new Error()
    }
  }
  return results;
}