前端Wiki/JavaScript/深入/异步编程

async 与 await

async/await 是 Promise 的语法糖，让异步代码长得像同步代码。函数前加 async，函数内就能用 await「等待」一个 Promise 完成，拿到的是结果本身而不是 Promise 对象，彻底消灭了 .then 链。

错误处理用 try/catch：await 的 Promise 如果 rejected，会像同步异常一样被 catch 捕获。这就是 async 函数里处理错误的标准姿势。

性能要点：串行的 await 会互相等待。如果两个请求互不依赖，应该先同时发起（不 await），再用 Promise.all 一起等，总耗时取决于最慢的那个，而不是两者之和。await 只能在 async 函数内（或模块顶层）使用。

本节要点async 函数里用 await 等待 Promise，代码按同步顺序写；错误用 try/catch；无依赖的异步用 Promise.all 并行，避免串行等待。

JavaScript

function wait(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

// async 函数：内部可用 await
async function main() {
  console.log('开始');

  await wait(300);                 // 暂停 300ms，但不阻塞主线程
  console.log('300 毫秒后继续');

  // 错误处理：await 的失败用 try/catch 接
  try {
    await Promise.reject('模拟请求失败');
  } catch (err) {
    console.log('错误被捕获：', err);
  }

  // 并行技巧：先同时发起，再一起等
  const t1 = wait(200);
  const t2 = wait(400);
  await Promise.all([t1, t2]);     // 总耗时≈400ms，而非 600ms
  console.log('两个任务都完成（并行，耗时取最慢者）');
}
main();

🔗 相关词条async/await Promise 错误处理异步同步函数

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读