Axios响应拦截器可统一处理HTTP状态码（如401跳转登录、403提示权限、500提示服务异常）及业务code错误，结合路由编程式导航并加锁防重复跳转。
在 Axios 中，拦截器本身已基于 Promise 构建，因此无需额外“配合”Promise 来实现错误重定向——关键在于合理利用响应拦截器（interceptors.response）捕获错误，并在 Promise 链中主动触发跳转逻辑（如路由重定向或登录弹窗），同时避免阻塞后续请求处理。
用响应拦截器统一捕获状态码类错误
后端常通过 HTTP 状态码（如 401、403、500）标识业务异常。应在响应拦截器中判断 status，并用 Promise.reject() 向外抛出标准化错误，便于上层统一处理：
- 对 401（未认证）：清除本地 token，跳转登录页
- 对 403（无权限）：提示无访问权限，可选跳转到首页或权限说明页
- 对 500/502/503 等服务端错误：提示“服务暂时不可用”，不自动跳转，避免打断用户操作
示例代码：
axios.interceptors.response.use(
response => response,
error => {
const { response } = error;
if (response) {
switch (response.status) {
case 401:
localStorage.removeItem('token');
window.location.href = '/login';
break;
case 403:
alert('您没有权限访问该页面');
window.location.href = '/';
break;
case 500:
case 502:
case 503:
alert('服务暂时不可用，请稍后再试');
break;
}
}
return Promise.reject(error); // 保持 Promise 链向下传递
}
);
结合路由库（如 Vue Router 或 React Router）做编程式导航
直接使用 window.location.href 会强制刷新页面，破坏单页应用体验。推荐接入路由实例，在拦截器中调用 router.push()：
立即学习“Java免费学习笔记（深入）”；
- Vue 项目：在创建 axios 实例前先引入 router，或通过插件方式注入
- React 项目：借助
useNavigateHook 的封装（需在组件外访问时，改用自定义 history 工具或事件总线） - 确保跳转逻辑不依赖 React/Vue 组件上下文（拦截器是全局的），避免直接调用 Hook
常见做法是将 router 实例挂载到 axios 实例上：
// 创建 axios 实例时传入 router
const service = axios.create({ baseURL: '/api' });
service.router = router; // 假设 router 已初始化
<p>service.interceptors.response.use(
res => res,
err => {
if (err.response?.status === 401) {
localStorage.removeItem('token');
service.router.push('/login');
}
return Promise.reject(err);
}
);
避免重复跳转与竞态问题
多个并发请求同时返回 401 时，若每个都执行跳转，会导致多次导航报错（如 Vue Router 的 NavigationDuplicated）。需加锁控制：
- 用布尔标志位（如
isRedirecting）标记是否已在跳转中 - 首次 401 触发跳转并置为 true；后续 401 暂缓处理，等待跳转完成再恢复
- 更健壮的方式：用 Promise 缓存跳转动作，所有等待中的请求 await 同一个跳转 Promise
简易防重定向示例：
let isRedirecting = false;
<p>service.interceptors.response.use(
res => res,
async err => {
const { status } = err.response || {};
if (status === 401 && !isRedirecting) {
isRedirecting = true;
try {
await service.router.push('/login');
} finally {
isRedirecting = false;
}
}
return Promise.reject(err);
}
);
对业务错误（非 HTTP 错误）也做统一拦截
有些接口返回 200 状态码，但 body 中含 { code: 401, msg: '登录过期' }。这类需在响应成功回调中二次校验：
- 约定后端返回统一结构：
{ code: number, data: any, msg: string } - 在
interceptors.response.use(成功回调)中检查 code，非 0 则视为业务异常 - 对 code=401/403 同样触发清理 + 跳转，保持行为一致
示例：
service.interceptors.response.use(
response => {
const { code, msg } = response.data;
if (code !== 0) {
if (code === 401) {
localStorage.removeItem('token');
service.router.push('/login');
}
return Promise.reject(new Error(msg || '请求失败'));
}
return response;
},
error => Promise.reject(error)
); 
