async/await 通过 try/catch 实现结构清晰的异常处理,避免 Promise 链中错误遗漏;需主动捕获 await 错误以防未处理拒绝;支持局部恢复、统一兜底及组合策略优化错误传播。

async/await 本身不自动处理异常,但它让异常处理回归到开发者熟悉的同步范式——用 try/catch 捕获、传递和响应错误,从而替代 Promise 链中分散的 .catch() 或冗余的回调嵌套。关键在于结构清晰、职责分明、避免遗漏。
把错误控制权收回到业务逻辑层
传统 Promise 链中,错误可能在任意 .then() 中抛出,需靠链尾统一 .catch() 拦截,但容易漏掉中间环节或掩盖源头。而 async/await 强制你为每个关键 await 显式决定“这里出错怎么办”,错误位置更直观,堆栈也更干净。
- 每个 await 表达式都可独立包裹在 try 块中,适合局部恢复(如降级返回默认值)
- 整个函数用一个 try/catch 包裹,适合统一日志、上报或 UI 提示
- 错误对象保留原始堆栈信息,调试时能准确定位是哪个 await 失败
避免“未捕获拒绝”陷阱
async 函数返回 Promise,若内部 await 的 Promise 被 reject 且未被 try/catch 捕获,就会变成未处理的 Promise rejection,触发 unhandledrejection 事件,甚至导致页面白屏或静默失败。
- 调用 async 函数时,必须用
.catch()或await在上层 try/catch 中处理其返回的 Promise - 切忌只写
someAsyncFn()而不处理返回值——这等于放任潜在错误逃逸 - 可在入口处(如 React useEffect、Vue onMounted)监听全局
window.addEventListener('unhandledrejection', ...)作为兜底
用组合策略代替重复 try/catch
面对多个串行 await,不必层层嵌套 try/catch。三种实用模式可大幅精简代码:
- 并行请求 + Promise.allSettled:同时发起多个请求,各自独立成败,避免单点失败阻断全部流程
-
错误封装函数:例如
const [data, err] = await to(fetch('/api/user')),将 try/catch 封装成解构友好的工具函数 - 请求层统一拦截:在 axios/fetch 封装层自动 catch 网络错误、状态码异常,并抛出标准化错误类型,组件层只需关注业务逻辑分支
明确错误传播意图
不是所有错误都要当场吞掉。有时你需要捕获、记录、再抛出,让上层决定如何响应;有时要转换错误类型,屏蔽敏感细节;还有时应返回默认值保证 UI 渲染不中断。
- 在 catch 中
throw new AppError('用户加载失败', { cause: err }),保持错误可追溯又语义清晰 - 对非关键异步操作(如埋点上报),可用
.catch(() => {})静默忽略,防止影响主流程 - 避免空 catch 或仅
console.error就结束——这会让错误消失在日志里,无人跟进


















