17370845950

async/await 是基于 Promise 的语法糖，使异步代码更易读；需用 try/catch 捕获错误，await 后必须是 Promise 或 thenable，暂停执行但不阻塞主线程。

async/await 是 JavaScript 中处理异步操作的语法糖，本质是基于 Promise 的更简洁、更易读的写法；错误处理需配合 try/catch，不能仅靠 .catch()。

async/await 的核心作用

它让异步代码看起来像同步代码，避免回调地狱和冗长的 .then() 链。函数加上 async 关键字后，自动返回 Promise；await 只能在 async 函数内使用，用于等待 Promise 成功（或失败）的结果。

• await 后面可以是 Promise、任意值，或一个 thenable 对象
• await 会“暂停”当前 async 函数的执行，但不会阻塞主线程，JS 引擎会继续运行其他任务
• await 表达式的值，就是 Promise resolve 的值；如果 Promise reject，且没被 catch，就会抛出错误

如何正确捕获 await 的错误

await 不会静默吞掉错误——一旦等待的 Promise 被 reject，它会立即以异常形式抛出，必须用 try/catch 捕获。只在链尾加 .catch() 是无效的。

• ✅ 正确：用 try/catch 包裹 await 语句
• ❌ 错误：写成 await someAsync().catch(...) —— 这样 catch 到的是 rejected Promise，但 await 仍会抛出异常
• ⚠️ 注意：多个 await 可共用一个 try/catch，但若想区分不同步骤的错误，建议分块处理或检查 error 类型/消息

常见错误处理模式

实际开发中常结合业务逻辑做分层处理：

• 单个请求失败：try/catch + 提示用户“加载失败，请重试”
• 多个并行请求：用 Promise.allSettled() 避免一个失败导致全部中断，再遍历结果分别判断 status
• 需要 fallback：await 配合自定义 Promise 封装，比如超时控制（Promise.race([fetch(), timeout()])）
• 全局兜底：在顶层 async 函数（如 React useEffect 或 Express 路由处理函数）中统一 try/catch，并记录日志或返回标准错误响应

容易忽略的关键细节

几个实战中高频踩坑点：

• await 后面不要直接写普通函数调用（除非它返回 Promise），否则 await 失效，变成同步等待
• async 函数内部未 await 的 Promise，不会被外层 try/catch 捕获——错误发生在“后台”，可能变成未处理的 rejection
• Node.js 环境下，未捕获的 Promise rejection 会触发 unhandledRejection 事件，应监听并告警
• 在循环中 await 要谨慎：for...of 可逐个等待；Promise.all() 更适合并发；避免 for 循环里直接 await 数组 map 结果（map 返回的是 pending Promise 数组，不是值）