Async/Await 是建立在 Promise 之上的语法糖，使异步代码更像同步、更易读易维护；async 函数自动返回 Promise，await 只能在其中使用并等待 Promise 兑现，错误用 try/catch 统一处理，适用于串行依赖场景，但不替代 Promise 本身。

Async/Await 是 JavaScript 中处理异步操作的语法糖，它建立在 Promise 之上，让异步代码写起来更像同步代码，可读性和维护性更高。它本身不是替代 Promise 的新机制，而是 Promise 的更简洁使用方式。

Async/Await 的核心规则

async 关键字用于声明一个函数是“异步函数”，该函数会自动返回一个 Promise；await 关键字只能用在 async 函数内部，用于等待一个 Promise 实例“兑现”（fulfilled 或 rejected），并暂停函数执行，直到结果返回。

• async 函数里，await 后面如果不是 Promise，会自动包装成 resolved 的 Promise
• await 会“解包” Promise 的值（即直接拿到 then 回调里的参数），不需要再写 .then()
• 错误处理统一用 try/catch，比 Promise 的 .catch() 更直观

对比 Promise 写法：更扁平、更易读

比如发起两个顺序请求：

Promise 风格：

fetch('/api/user')
  .then(res => res.json())
  .then(user => fetch(`/api/posts?userId=${user.id}`))
  .then(res => res.json())
  .then(posts => console.log(posts))
  .catch(err => console.error(err));

Async/Await 风格：

async function loadUserData() {
  try {
    const userRes = await fetch('/api/user');
    const user = await userRes.json();
    const postsRes = await fetch(`/api/posts?userId=${user.id}`);
    const posts = await postsRes.json();
    console.log(posts);
  } catch (err) {
    console.error(err);
  }
}

没有嵌套，逻辑线性，调试时断点也更自然——await 行停住，变量名清晰，不像 .then() 里容易丢失上下文。

它比 Promise “更好用”吗？取决于场景

不是绝对更好，而是更合适某些情况：

• ✅ 多个异步操作有依赖关系（串行）：await 让顺序一目了然
• ✅ 错误处理集中：try/catch 比链式 .catch() 更符合直觉，尤其多层嵌套时
• ❌ 纯并行请求（无依赖）：Promise.all() 更简洁，await Promise.all([p1, p2]) 也可以，但没必要包裹 async/await
• ❌ 需要精细控制 Promise 状态（如 pending 中间态、手动 resolve/reject）：还是得直接操作 Promise 构造器

注意几个常见坑

async/await 不是万能银弹，用错反而增加复杂度：

• 忘记加 async：函数不会自动变成异步，await 会报语法错误
• 在循环中滥用 await：for...of + await 是串行，想并行要用 Promise.all() 包数组
• await 后面是未 catch 的 Promise：会抛出异常，必须用 try/catch 或确保 Promise 自身已处理错误
• 顶层 await（模块级）只在 ES 模块中有效，CommonJS 不支持

不复杂但容易忽略：Async/Await 是 Promise 的升级体验，不是替代品。理解 Promise 是前提，用得好，代码更干净；用得随意，可能掩盖异步本质问题。