Vue.js asyncData嵌套Promise：Node端未处理Promise拒绝告警问题

这个警告出现的原因很明确：你在Promise的catch回调里直接throw错误，但这个抛出的错误并没有被当前的Promise链捕获，导致Node端检测到未处理的Promise拒绝。因为在then/catch回调中抛出的错误会让该回调返回的Promise变为rejected状态，而你没有对这个rejected的Promise做任何后续处理，所以Node会抛出这个告警。

下面给你两种可行的解决方案：

方案一：用async/await重构代码（推荐） #

async/await的写法比嵌套Promise更清晰，也更容易统一处理错误。你可以把asyncData改成异步函数，用try/catch包裹两次请求，出错时直接跳转并确保Promise链正常结束：

async asyncData({ router }) {
  try {
    // 顺序执行两次请求
    await firstFetch();
    await secondFetch();
    // 如果需要给组件返回数据，在这里return对应的对象即可
    return {};
  } catch (error) {
    // 跳转404页面
    router.push('/404');
    // 返回resolved的Promise，避免未处理的拒绝
    return {};
  }
}

这种写法不仅代码更易读，还能确保所有错误都被try/catch捕获，不会留下未处理的Promise拒绝。

方案二：修复原Promise嵌套写法 #

如果你不想改用async/await，可以调整原有的Promise链，确保所有错误都被处理，不再直接throw而是用resolve终止Promise链：

asyncData({ router }) {
  return firstFetch()
    .then(() => secondFetch())
    .catch((error) => {
      router.push('/404');
      // 返回一个resolved的Promise，让整个链正常结束
      return Promise.resolve();
    });
}

这里去掉了多余的new Promise包裹，直接返回Promise链。当任意请求出错时，进入catch回调跳转页面，然后返回Promise.resolve()让整个Promise链变为resolved状态，这样Node端就不会检测到未处理的拒绝了。

另外要注意：原来代码里的throw { url: '/404' }其实没必要，直接用router.push跳转即可，因为你已经在前端处理了错误跳转，不需要再抛出错误让Node端处理。

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