在事件监听器中使用 async/await 时，必须在 async 回调内部用 try/catch 包裹 await 才能捕获异常；否则 Promise 拒绝会逃逸为 unhandledrejection，无法被外层同步 try/catch 捕获。
在事件监听器中使用 async/await 时，直接将异步函数作为回调传入（如 button.addEventListener('click', async () => { ... })）会导致异常无法被常规 try/catch 捕获，因为浏览器不会将 Promise 拒绝（rejected promise）自动转为同步错误抛出。要安全捕获异常，核心思路是：**不让异常“逃逸”出 Promise 链，且主动处理拒绝态**。
✅ 正确写法：在 async 回调内部用 try/catch 包裹 await
这是最直接、最推荐的方式。async 函数本身返回 Promise，但其中的 await 表达式一旦失败，会立即触发 catch 块，你可以在里面做错误提示、回滚 UI、上报日志等。
示例：
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 或只在外层包裹同步代码
以下写法无法捕获异步异常：
立即学习“Java免费学习笔记（深入）”；
-
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(); // 阻止默认控制台警告（可选）
});
? 补充建议：避免隐式 Promise 链断裂
如果事件回调里调用了多个 await，或混用 .then() 和 await，注意链路完整性：
- 不要写
await fn1(); fn2().catch(...)——fn2的异常仍会逃逸 - 统一用
await+try/catch，或全部用.then().catch()，保持风格一致 - 若需并发请求，用
Promise.allSettled()替代Promise.all()，避免一个失败导致整体中断
