如何处理嵌套Promise所有rejection 修复Promise.race未捕获报错

控制台抛出Unhandled promise rejection的核心原因是retrieve函数中Promise链式调用写法错误，同时存在超时逻辑未清理原请求、手动嵌套Promise反模式两个隐患。 #

直接触发报错的问题点 #

你在处理promiseRace结果时，将.then()和.catch()拆成了两个独立的调用语句，没有形成链式调用：

const promiseRace = promiseTimeout(doFetch(requestURL.toString()), 4000);

// 第一个调用：仅注册then回调，返回的新Promise没有绑定catch
promiseRace.then((records) => {
  const transformedData = transformData(records, page);
  resolve(transformedData);
})
// 第二个调用：仅给原始promiseRace注册catch，管不到上面then返回的新Promise
promiseRace.catch((error) => {
  console.log(error);
})

Promise的.then()方法会返回一个全新的Promise实例，当promiseRace进入rejected状态时：

• 第二个独立调用的.catch()能捕获到原始promiseRace的错误，触发你预期的console.log
• 第一个.then()生成的新Promise因为没有绑定任何错误处理，会直接抛出未捕获的Promise拒绝异常，就是你控制台看到的报错。

修复方式 #

将.catch()链式挂载到.then()的返回值上，形成完整的调用链，同时记得错误发生时要执行reject，避免外层调用retrieve时拿到的Promise永远处于pending状态：

promiseRace.then((records) => {
  const transformedData = transformData(records, page);
  resolve(transformedData);
}).catch((error) => {
  console.log(error);
  reject(error); // 必须向外抛出错误，否则外层无法感知请求失败
})

其他会导致未捕获错误的隐患 #

1. 超时逻辑未清理原请求 #

promiseTimeout实现中，超时触发后仅reject了超时Promise，没有取消传入的原fetch请求：当超时先触发时，doFetch返回的Promise还在运行，后续它因为网络错误（比如访问不存在的端点）reject时，因为Promise.race不会主动终止传入的Promise，这个游离的失败请求没有绑定任何错误处理，也会触发未捕获拒绝。
可以改造promiseTimeout支持传入中断信号，超时后主动取消fetch：

function promiseTimeout(promiseFactory, ms) {
  const controller = new AbortController();
  const timeout = new Promise((resolve, reject) => {
    const timeoutID = setTimeout(() => {
      clearTimeout(timeoutID);
      controller.abort(); // 主动中断原请求
      reject("fetch failed - timeout");
    }, ms)
  })
  return Promise.race([promiseFactory(controller.signal), timeout]);
}
// 对应doFetch要接收signal参数传给fetch
function doFetch(url, signal) {
  return fetch(url, { signal })
    .then((response) => {
      if (!response.ok) throw new Error("fetch failed - non 200");
      return response.json();
    })
}

2. 手动嵌套Promise的反模式 #

doFetch函数里手动包了一层new Promise，属于典型的Promise反模式：一方面容易出现resolve/reject遗漏的问题，另一方面嵌套的Promise错误如果没有手动抛出，很容易变成未捕获异常。完全可以直接返回fetch的原生链式调用，不需要额外包装。 #

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