使用Axios拦截器全局处理响应仍出现未捕获错误的问题

问题出在你响应拦截器的错误处理逻辑里——你在处理完错误后又throw error，这会让Promise保持rejected状态，而调用API的地方没有用try/catch捕获这个reject，所以控制台会出现Uncaught (in promise)错误。

解决方法 #

1. 拦截器内消化错误（不再向外传递） #

如果希望拦截器处理后彻底消除未捕获错误，直接返回一个resolved状态的Promise，比如返回业务默认值：

export const instance = axios.create()

instance.interceptors.response.use(
  res => res,
  error => {
    if (error.response?.status === 401) {
      console.log('401未授权：', error)
      // 这里可以添加跳转登录、清除token等逻辑
    }
    // 返回resolved的Promise，终止错误传递
    return Promise.resolve({ data: [] }) // 根据业务场景返回合适的默认值
  }
)

2. 调用API时手动捕获错误 #

如果需要保留错误传递给调用方处理，必须在API调用处用try/catch包裹：

export const getcountryAllocations = async (country: string) => {
  try {
    const response = await instance.get<IcountryAllocationTypeResponse[]>(
      `/asa/${country}`
    )
    return response.data
  } catch (error) {
    console.error('获取国家分配数据失败：', error)
    // 返回默认值或抛出自定义错误
    return []
  }
}

3. 全局兜底捕获未处理Promise错误 #

如果不想逐个修改API调用，可以添加全局监听来拦截未处理的Promise rejection：

window.addEventListener('unhandledrejection', (event) => {
  event.preventDefault() // 阻止控制台显示默认的未捕获错误提示
  console.log('全局捕获未处理错误：', event.reason)
})

注意事项 #

• 处理401这类权限错误时，通常建议在拦截器里直接执行跳转登录操作，同时返回默认值，避免业务代码重复处理权限逻辑。
• 如果选择消化错误，要确保默认返回值符合后续业务逻辑的预期，避免出现数据类型不匹配等问题。

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