JavaScript 中怎么使用 async 和 await 实现顺序执行多个任务-js教程-PHP中文网

async/await 可实现异步任务的严格顺序执行：将 await 依次放在每个 promise 前，确保前一个完成后再执行下一个；需避免误用 promise.all 导致并发而非串行；配合 try/catch 可精准捕获并处理某一步失败。

javascript 中怎么使用 async 和 await 实现顺序执行多个任务

在 JavaScript 中，async 和 await 是让异步代码看起来像同步代码的关键语法，它们天然支持顺序执行多个异步任务——只要把 await 放在每个 Promise 前面，JS 就会等前一个完成后再执行下一个。

用 await 逐个等待 Promise

最直接的方式是把多个异步操作写在同一个 async 函数里，每个都用 await 调用：

async function runTasks() {
  const result1 = await fetch('/api/data1').then(r => r.json());
  console.log('第一步完成', result1);

  const result2 = await fetch('/api/data2').then(r => r.json());
  console.log('第二步完成', result2);

  const result3 = await fetch('/api/data3').then(r => r.json());
  console.log('第三步完成', result3);

  return [result1, result2, result3];
}

这样三步严格按顺序执行，每一步都等上一步的 Promise settle 后才开始。

封装成独立的 async 函数再串行调用

如果任务逻辑较复杂，建议拆成多个小的 async 函数，再组合调用：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

每个函数只做一件事，返回 Promise（比如 getData1()、saveToDB(data)）
主函数中用 await 依次调用，保持可读性和可测试性
出错时能准确定位是哪一步失败（配合 try/catch 更稳妥）

注意：别误用 Promise.all 导致“并行”而非“顺序”

Promise.all([p1, p2, p3]) 是并发执行，不是顺序。如果你写了：

const [r1, r2, r3] = await Promise.all([
  fetch('/a').then(r => r.json()),
  fetch('/b').then(r => r.json()),
  fetch('/c').then(r => r.json())
]);

这三路请求会同时发出，不满足“先 a 再 b 再 c”的要求。只有当后续步骤依赖前一步结果（比如用 r1.id 请求 /b?id=r1.id），才必须用 await 串行。

错误处理：用 try/catch 捕获某一步失败

顺序执行中任意一步 reject，整个流程就会中断。加 try/catch 可以控制错误行为：

async function safeRun() {
  try {
    const a = await step1();
    const b = await step2(a); // 依赖 a 的结果
    const c = await step3(b);
    return { success: true, data: c };
  } catch (err) {
    console.error('某一步出错了', err);
    return { success: false, error: err.message };
  }
}

也可以在某步内单独捕获，避免影响后续（比如“失败就跳过，继续下一步”）。