Axios拦截器分为请求和响应两种类型，请求拦截器在发送请求前添加认证、设置请求头等，响应拦截器在接收响应后处理数据、错误提示等。通过axios.interceptors.request.use()和axios.interceptors.response.use()注册拦截器，支持多个拦截器按顺序执行，请求拦截器先注册先执行，响应拦截器先注册后执行，适用于统一处理token、loading状态、错误码跳转等场景，提升代码可维护性。
在使用 Axios 进行网络请求时，拦截器（Interceptors）是一个非常实用的功能。它允许你在请求发送前或响应返回后自动处理数据，而无需在每个请求中重复写逻辑。这对于统一处理认证、错误提示、加载状态等场景尤其有用。
什么是 Axios 拦截器
Axios 拦截器分为两种：请求拦截器和响应拦截器。
请求拦截器会在请求被发送到服务器之前执行，你可以在这里修改请求配置，比如添加 token、设置请求头、记录日志等。
响应拦截器会在接收到服务器响应后、then 或 catch 处理前执行，适合做响应数据的统一处理、错误统一提示、状态码判断等。
立即学习“Java免费学习笔记（深入）”；
如何使用请求拦截器
通过 axios.interceptors.request.use() 添加请求拦截逻辑。
常见用途包括：
- 在请求头中添加认证信息（如 Authorization）
- 显示全局 loading 动画
- 格式化请求参数
示例代码：
axios.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
// 显示加载动画
showLoading();
return config;
},
error => {
// 处理请求错误
return Promise.reject(error);
}
);
如何使用响应拦截器
通过 axios.interceptors.response.use() 添加响应拦截逻辑。
典型应用场景有：
- 统一处理 401 未授权跳转登录页
- 隐藏 loading 动画
- 拦截特定错误码并提示用户
- 简化响应数据结构（只返回 data）
示例代码：
axios.interceptors.response.use(
response => {
// 隐藏加载动画
hideLoading();
return response.data; // 直接返回 data 字段
},
error => {
hideLoading();
if (error.response?.status === 401) {
// 清除本地 token 并跳转登录页
localStorage.removeItem('token');
window.location.href = '/login';
} else if (error.response?.status === 500) {
alert('服务器内部错误');
}
return Promise.reject(error);
}
);
拦截器的执行顺序
如果有多个拦截器，它们会按照注册顺序依次执行。
请求拦截器：先注册的先执行。
响应拦截器：先注册的后执行（类似栈结构）。
例如：
// 执行顺序：req1 → req2 → 网络请求 → res2 → res1 axios.interceptors.request.use(req1); axios.interceptors.request.use(req2); axios.interceptors.response.use(res1); axios.interceptors.response.use(res2);
基本上就这些。拦截器机制让 Axios 的请求管理变得集中且高效，合理使用可以大幅提升开发效率和项目可维护性。
