vue axios 如何实现拦截
请求拦截与响应拦截的实现
在Vue项目中，Axios拦截器通过interceptors属性实现，分为请求拦截（request）和响应拦截（response）。以下为具体配置方法：
安装Axios
npm install axios请求拦截器
请求拦截器在请求发送前执行，常用于添加统一请求头、认证token或修改请求参数：
import axios from 'axios';
// 创建实例
const instance = axios.create({
baseURL: 'https://api.example.com'
});
// 请求拦截
instance.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);响应拦截器
响应拦截器在接收到响应后执行，常用于统一处理错误状态码或数据格式：
instance.interceptors.response.use(
response => {
// 对2xx状态码处理
if (response.status === 200) {
return response.data;
}
return response;
},
error => {
// 对非2xx状态码处理
if (error.response.status === 401) {
router.push('/login');
}
return Promise.reject(error);
}
);全局拦截与实例拦截的区别
- 全局拦截：通过
axios.interceptors直接修改，影响所有请求 - 实例拦截：通过自定义实例实现，适合不同API地址的差异化处理
拦截器移除方法
需保存拦截器ID以便后续移除：
const reqInterceptor = instance.interceptors.request.use(...);
instance.interceptors.request.eject(reqInterceptor);典型应用场景
- Token自动刷新：在401错误时自动刷新token并重试请求
- 请求加密：拦截请求数据统一加密处理
- 加载状态管理：通过拦截器控制全局loading状态显示
- 数据格式化：统一处理返回数据格式
注意：拦截器中异步操作需返回Promise链，避免阻塞请求流程。错误处理必须调用Promise.reject向外传递错误。
