Vue中如何区分处理全局意外错误与Token刷新等预期业务异常

最优实现方案 #

你可以通过给已处理的预期错误添加自定义标记的方式解决该问题，无需调整现有处理逻辑层级，也不需要额外冗余代码，具体实现如下：

步骤1：修改axios响应拦截器 #

在跳转登录页后返回rejected Promise时，给错误对象添加handled标记，标识该错误已经完成业务处理，不需要上层再重复处理：

else {
  router.push({ name: 'auth-login' });
  const processedError = new Error("Unable to refresh token. Need login.");
  // 自定义标记：该错误已被处理
  processedError.handled = true;
  return Promise.reject(processedError);
}

步骤2：调整Vue全局错误处理器 #

在全局错误处理逻辑最前面增加判断，过滤掉所有带handled标记的已处理错误：

app.config.errorHandler = function (err, vm, info) {
  // 跳过已经手动处理完成的预期错误
  if (err?.handled) return;
  notyf.error(
    "Something went wrong. Please try again."
  );
}

方案优势 #

• 完全符合错误就近处理原则：401相关的跳转逻辑依然保留在拦截器层，不需要上浮到全局处理器
• 无冗余代码：上层所有接口调用不需要额外添加try catch捕获该类错误，开发效率不受影响
• 符合全局错误处理器的设计定位：仅处理未被捕获的意外异常，预期错误不会触发全局提示
• 扩展性强：后续其他类似的已处理预期错误（比如权限不足、参数校验失败等已经在业务层完成处理的场景），都可以通过添加同样的handled标记实现统一过滤

补充说明 #

你之前提到的方案3（中断错误传播）不推荐使用，强制中断Promise链路会导致上层等待的异步逻辑出现悬而未决的状态，可能引发内存泄漏或其他隐性bug，通过标记过滤的方式逻辑更清晰，风险更低。

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