ES7中JavaScript的async/await在事件回调中的异常处理方案咨询

这个问题确实挺棘手的——我之前在处理异步事件回调时也踩过同样的坑！你说得没错，async函数本质是Promise的语法糖，当它抛出异常时，其实是把Promise置为reject状态。但事件触发机制（比如FileReader的onload）根本不会去处理这个回调函数返回的Promise，所以这些rejected状态的Promise就成了“无人认领”的异常，既不会被window.onerror捕获，也不会在控制台抛出明显的错误，就这么悄悄丢失了。

下面分享几个实用的解决办法：

• 局部主动捕获异常（最推荐）
  直接在async回调里用try/catch包裹所有包含await的代码，主动把异常抓在手里：

  async badFunc() { throw "bad"; }
  var reader = new FileReader();
  reader.onload = async function () {
    try {
      await badFunc();
    } catch (err) {
      console.error('捕获到异常:', err);
      // 这里可以根据业务需求做处理：比如上报错误、提示用户、恢复状态等
    }
  }
  

  这种方式最直观，也能让你在异常发生时立刻做针对性处理，避免异常扩散。

• 给async函数的返回Promise绑定catch
  如果你觉得try/catch会让代码嵌套变深，也可以利用async函数返回Promise的特性，直接在回调函数后面链式调用catch：

  async badFunc() { throw "bad"; }
  var reader = new FileReader();
  reader.onload = async function () {
    await badFunc();
  }.catch(err => {
    console.error('捕获到异常:', err);
  });
  

  或者把回调抽成独立函数，再处理catch：

  const handleFileLoad = async () => {
    await badFunc();
  };
  var reader = new FileReader();
  reader.onload = () => handleFileLoad().catch(err => console.error(err));
  

• 全局兜底监听未处理的Promise拒绝
  如果你担心有些边缘场景漏掉了异常处理，可以给window绑定unhandledrejection事件，这是专门用来捕获未被处理的Promise reject的全局事件：

  window.addEventListener('unhandledrejection', (event) => {
    console.error('全局捕获未处理的Promise异常:', event.reason);
    // 这里可以做统一的错误上报，比如发给监控系统
    event.preventDefault(); // 阻止浏览器默认的控制台警告提示
  });
  

  不过这只是兜底方案，不能替代局部的异常处理——毕竟全局捕获只能知道有异常，很难做针对性的业务恢复。

总的来说，优先在局部用try/catch或者Promise.catch处理异常，全局监听作为最后一道防线，就能避免async/await在事件回调里的异常丢失问题啦。

内容的提问来源于stack exchange，提问作者Steve