JavaScript 中 async/await 怎么在事件监听器回调函数中安全捕获异步异常-js教程-PHP中文网

在事件监听器中使用 async/await 时，必须在 async 回调内部用 try/catch 包裹 await 才能捕获异常；否则 promise 拒绝会逃逸为 unhandledrejection，无法被外层同步 try/catch 捕获。

javascript 中 async/await 怎么在事件监听器回调函数中安全捕获异步异常

在事件监听器中使用 async/await 时，直接将异步函数作为回调传入（如 button.addEventListener('click', async () => { ... })）会导致异常无法被常规 try/catch 捕获，因为浏览器不会将 Promise 拒绝（rejected promise）自动转为同步错误抛出。要安全捕获异常，核心思路是：**不让异常“逃逸”出 Promise 链，且主动处理拒绝态**。

✅ 正确写法：在 async 回调内部用 try/catch 包裹 await

这是最直接、最推荐的方式。async 函数本身返回 Promise，但其中的 await 表达式一旦失败，会立即触发 catch 块，你可以在里面做错误提示、回滚 UI、上报日志等。

示例：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

button.addEventListener('click', async () => {
  try {
    const data = await fetch('/api/user').then(r => r.json());
    renderUser(data);
  } catch (err) {
    console.error('获取用户失败：', err);
    showNotification('请求失败，请重试');
    // 可选：恢复按钮状态
    button.disabled = false;
  }
});

⚠️ 错误写法：漏掉 try/catch 或只在外层包裹同步代码

以下写法无法捕获异步异常：

button.addEventListener('click', async () => { await fetch(...); }) —— 异常变成未处理的 Promise rejection，触发 unhandledrejection，但不中断执行，也不易调试
try { button.addEventListener(...); } catch (e) { ... } —— addEventListener 是同步方法，不会抛出异步错误

? 进阶技巧：统一处理未捕获的异步拒绝（兜底）

为防遗漏，可监听全局 unhandledrejection 事件，记录错误或触发告警（仅用于监控，不能替代局部 try/catch）：

window.addEventListener('unhandledrejection', (event) => {
  console.warn('未捕获的 Promise 拒绝：', event.reason);
  // 上报错误平台，如 Sentry.captureException(event.reason);
  event.preventDefault(); // 阻止默认控制台警告（可选）
});