使用setTimeout拒绝JavaScript Promise时出现未捕获Promise错误的排查

你的问题出在对Promise回调链的错误使用：你分别对同一个myPromise调用了.then()和.catch()，这相当于创建了两条独立的Promise处理链：

1. 第一条链：myPromise.then(...) —— 这条链只处理了Promise resolve的情况，完全没有覆盖reject的场景
2. 第二条链：myPromise.catch(...) —— 这条链单独捕获了Promise的reject

当Promise被reject时，第一条链因为没有错误处理逻辑，会触发浏览器的“Uncaught (in promise)”错误；而第二条链的catch虽然能正常捕获错误并更新DOM，但无法阻止第一条链的未处理错误抛出。

修复方案 #

你需要将.then()和.catch()组成同一条链式调用，这样reject的错误会沿着链条传递到catch中统一处理：

修改后的JavaScript代码 #

const myPromise = new Promise(function(myResolve, reject) {
  setTimeout(() => {
    reject('I hate you');
  }, 3000);
});

// 链式调用：then之后直接跟catch，共用同一个Promise处理链
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
}).catch(error => {
  console.log("Catching it");
  document.getElementById("demo").innerHTML = error;
});

或者，你也可以在.then()中添加第二个参数来处理reject，同样能避免未捕获错误：

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
}, function(error) { // 第二个参数专门处理Promise的reject状态
  console.log("Catching it");
  document.getElementById("demo").innerHTML = error;
});

关键原理 #

Promise的.then()和.catch()方法都会返回一个新的Promise对象，链式调用能确保所有的状态变化（resolve/reject）都在同一条链中被处理，不会出现遗漏的未处理reject情况。

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