vue axios 如何实现拦截
请求拦截与响应拦截的实现
在Vue项目中，使用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 => {
// 对响应数据做处理（例如提取data字段）
return response.data;
},
error => {
// 统一错误处理（例如401跳转登录）
if (error.response.status === 401) {
router.push('/login');
}
return Promise.reject(error);
}
);拦截器移除
如需移除拦截器，保存拦截器ID后调用eject：
const reqInterceptor = axios.interceptors.request.use(...);
axios.interceptors.request.eject(reqInterceptor);实际应用示例
结合Vue的全局配置：
// main.js
axios.interceptors.request.use(...);
axios.interceptors.response.use(...);
Vue.prototype.$http = axios;在组件中直接使用：
this.$http.get('/user').then(...)通过拦截器可以实现日志记录、Loading状态管理、请求重试等高级功能，注意避免在拦截器中执行耗时操作以免阻塞请求流程。
