使用Promise处理模态框时，拒绝Promise抛出“Uncaught (in promise)”错误如何解决？

这个问题本质是Promise被拒绝后没有对应的catch处理导致的——JavaScript运行时会把未被捕获的Promise拒绝视为错误，从而抛出"Uncaught (in promise)"提示。下面给你几种实用的解决办法：

方法一：使用模态框Promise时显式添加catch #

这是最直接且推荐的方式，每次调用模态框并处理其Promise时，都加上catch块来处理取消/关闭的情况，哪怕只是做个空处理：

// 调用模态框后处理Promise结果
modal.promise
  .then((result) => {
    // 用户点击"确定"后的业务逻辑
    console.log('用户确认操作，返回结果:', result);
  })
  .catch((reason) => {
    // 用户取消或关闭模态框后的逻辑，可根据需求处理，也可以留空
    console.log('用户取消操作，原因:', reason);
  });

这样就能确保所有的Promise拒绝都被捕获，不会触发未捕获错误提示。

方法二：封装模态框时给Promise默认添加catch #

如果你不想每次使用模态框都重复写catch，可以在创建modal.promise的时候就附加一个默认的catch处理，统一管理所有拒绝情况：

let modalResolve, modalReject;
modal.promise = new Promise<any>((resolve, reject) => {
  modalResolve = resolve;
  modalReject = reject;
}).catch((reason) => {
  // 这里可以做默认的拒绝处理，比如打印调试日志
  console.debug('模态框被取消:', reason);
  // 若需要让后续调用者仍能捕获该拒绝，可重新抛出错误
  // throw reason;
});

// 保持你的原有逻辑不变
modal.close = (result) => {
  if (modal.isOpen) {
    modalResolve(result);
  }
};
modal.dismiss = (reason) => {
  if (modal.isOpen) {
    modalReject(reason);
  }
};

注意：如果在默认catch里重新抛出错误，后续调用者仍然需要自己添加catch来处理；如果不抛出，这个Promise会转为resolved状态，后续then会接收到undefined（除非你在catch里返回其他值）。

兜底方案：监听全局unhandledrejection事件 #

作为最后兜底的手段，你可以在全局层面监听unhandledrejection事件，捕获所有未处理的Promise拒绝，避免控制台出现错误提示：

window.addEventListener('unhandledrejection', (event) => {
  // 阻止浏览器默认的错误提示行为
  event.preventDefault();
  console.log('捕获到未处理的Promise拒绝:', event.reason);
});

不过这种方式不推荐作为主要解决方案，最好还是针对特定的Promise添加catch处理，这样业务逻辑会更清晰，也更容易定位问题。

为什么会出现这个错误？ #

浏览器（以及Node.js环境）会对所有未被捕获的Promise拒绝抛出错误，这是ES6规范明确的行为——目的是提醒开发者可能遗漏了错误处理逻辑。你的模态框调用modal.dismiss()时触发了Promise的reject，但没有任何代码去捕获这个reject，所以就出现了那个"Uncaught (in promise)"的错误提示。

内容的提问来源于stack exchange，提问作者Javier Marín