JavaScript 中 Axios 拦截器怎么配合 Promise 实现统一的异步错误重定向-js教程-PHP中文网

Axios响应拦截器可统一处理HTTP状态码（如401跳转登录、403提示权限、500提示服务异常）及业务code错误，结合路由编程式导航并加锁防重复跳转。

javascript 中 axios 拦截器怎么配合 promise 实现统一的异步错误重定向

在 Axios 中，拦截器本身已基于 Promise 构建，因此无需额外“配合”Promise 来实现错误重定向——关键在于合理利用响应拦截器（interceptors.response）捕获错误，并在 Promise 链中主动触发跳转逻辑（如路由重定向或登录弹窗），同时避免阻塞后续请求处理。

用响应拦截器统一捕获状态码类错误

后端常通过 HTTP 状态码（如 401、403、500）标识业务异常。应在响应拦截器中判断 status，并用 Promise.reject() 向外抛出标准化错误，便于上层统一处理：

对 401（未认证）：清除本地 token，跳转登录页
对 403（无权限）：提示无访问权限，可选跳转到首页或权限说明页
对 500/502/503 等服务端错误：提示“服务暂时不可用”，不自动跳转，避免打断用户操作

示例代码：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

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()：

Vue 项目：在创建 axios 实例前先引入 router，或通过插件方式注入
React 项目：借助 useNavigate Hook 的封装（需在组件外访问时，改用自定义 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);
}
);</p>

避免重复跳转与竞态问题

多个并发请求同时返回 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);
}
);</p>

对业务错误（非 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)
);