如何用Axios拦截器处理401未授权？如何消除控制台红色报错

嘿，这个问题我之前也踩过坑！你控制台出现红色报错的核心原因很简单：你在拦截器里用了Promise.reject()，浏览器会把未被捕获的Promise拒绝视为「未处理错误」，所以会弹出红色的报错提示。

要解决这个问题，有两种实用思路，你可以根据业务场景选：

思路一：阻止错误继续冒泡（不抛出拒绝） #

如果401的逻辑已经在拦截器里处理完了（比如自动跳转登录页），不需要业务代码再捕获这个错误，那你可以返回Promise.resolve()代替Promise.reject()，这样浏览器就不会把它当成错误抛出了。

修改后的代码示例：

axios.interceptors.response.use(
  response => {
    console.log("Axios Response: ", response);
    return response;
  },
  error => {
    if (error.response.status === 401) {
      console.log("RESPONSE 401");
      // 返回resolved的Promise，阻止错误冒泡
      // 可以自定义标记，方便业务代码识别这是处理过的401
      return Promise.resolve({ isHandled401: true });
    }
    console.log("Axios Response Error: ", error.response);
    // 其他错误正常抛出，交给业务代码处理
    return Promise.reject(error);
  }
);

注意：这么做之后，业务代码的.then()会接收到你返回的对象，记得在业务逻辑里判断isHandled401，避免后续流程出错。

思路二：确保业务代码捕获所有错误 #

如果你希望401的错误还是能被业务代码处理，但不想控制台显示红色报错，那就要保证所有使用Axios的请求都有对应的.catch()处理。

比如业务请求代码要写成这样：

axios.get('/your-api-path')
  .then(res => {
    // 处理正常响应逻辑
  })
  .catch(err => {
    // 在这里统一处理所有错误，包括401
    if (err.response?.status === 401) {
      console.log("业务代码中处理401逻辑");
    }
    // 其他错误的处理逻辑
  });

这样一来，拦截器里返回的Promise.reject()会被业务代码的.catch()捕获，浏览器就不会把它当成未处理错误，自然也就不会显示红色报错了。

这两种方法里，我更推荐第二种，因为它符合错误处理的最佳实践——错误应该被明确捕获和处理，而不是直接吞掉。当然如果你的401逻辑完全在拦截器里闭环处理了，第一种也完全可行。

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