为何选择文件时触发Uncaught (in promise) Error？Promise拒绝机制问题

你遇到的这个情况其实是Promise的**未处理拒绝（Unhandled Rejection）**机制在起作用，我来帮你拆解清楚：

为什么选择文件时会提前出现日志？ #

当你在storeAPromise函数里创建并reject了一个Promise，但此时这个Promise并没有绑定任何错误处理函数（不管是.catch()还是.then()的第二个参数）。浏览器的Promise引擎会立刻检测到这种「被reject但没有被处理」的状态，直接抛出Uncaught (in promise)的错误提示——哪怕你之后在点击按钮时再绑定处理函数，这个早期的未处理状态已经被引擎记录下来了。

简单来说：Promise被reject的那一刻，如果没有已绑定的错误处理器，浏览器就会把它当成未捕获的异常输出日志。

两种可行的解决办法 #

方式一：创建Promise时先绑定空的错误处理器

你可以在生成Promise的同时，先绑定一个空的catch来避免浏览器触发未处理拒绝提示，之后再在点击按钮时添加实际的业务逻辑：

<html> 
<body> 
  <input id='file-dlg' type='file'/> 
  <br/> 
  <button id='submit' type='button'>submit</button> 
  <script> 
    document.getElementById('file-dlg').addEventListener('change', storeAPromise); 
    var p; 

    function storeAPromise() { 
      p = new Promise(function executor(resolve, reject) { 
        try { 
          throw new Error('snafu'); 
        } catch(e) { 
          reject(e); 
        } 
      }).catch(() => {}); // 提前绑定空catch，避免触发未处理拒绝提示
    }; 

    document.getElementById('submit').onclick = function() { 
      // 点击时绑定实际的错误处理逻辑
      p.catch(function(e) { 
        console.error('some problem happened', e); 
      }); 
    }; 
  </script> 
</body> 
</html>

方式二：延迟Promise的创建时机

如果业务逻辑允许，你可以把Promise的创建推迟到点击submit按钮的时候，这样就不会出现提前reject的情况：

<html> 
<body> 
  <input id='file-dlg' type='file'/> 
  <br/> 
  <button id='submit' type='button'>submit</button> 
  <script> 
    document.getElementById('file-dlg').addEventListener('change', storeFile); 
    var selectedFile; 

    function storeFile() { 
      selectedFile = document.getElementById('file-dlg').files[0];
    }; 

    document.getElementById('submit').onclick = function() { 
      // 点击按钮时才创建并处理Promise
      new Promise(function executor(resolve, reject) { 
        try { 
          throw new Error('snafu'); 
        } catch(e) { 
          reject(e); 
        } 
      }).catch(function(e) { 
        console.error('some problem happened', e); 
      }); 
    }; 
  </script> 
</body> 
</html>

补充说明 #

这种未处理拒绝的检测是ES6 Promise规范的一部分，目的是帮助开发者避免遗漏错误处理。不管是浏览器还是Node.js，都会对这类情况给出提示，确保你不会忽略掉Promise链中的潜在错误。

内容的提问来源于stack exchange，提问作者Marcus Junius Brutus