vue实现请求拦截
请求拦截的实现方式
在Vue项目中，可以通过axios的拦截器（interceptor）功能实现请求拦截。axios拦截器分为请求拦截和响应拦截，用于在请求发送前或响应返回后统一处理逻辑。
安装axios
确保项目中已安装axios。若未安装，可通过以下命令安装：
npm install axios创建axios实例并配置拦截器
在Vue项目的src目录下创建utils/request.js文件，配置axios实例和拦截器：
import axios from 'axios';
const service = axios.create({
baseURL: 'https://api.example.com', // 根据实际API地址修改
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求前可修改config，例如添加token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
// 请求错误处理
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据统一处理
return response.data;
},
error => {
// 响应错误处理（如HTTP状态码非200）
if (error.response.status === 401) {
// 跳转到登录页
window.location.href = '/login';
}
return Promise.reject(error);
}
);
export default service;在Vue组件中使用拦截器
在需要发起请求的组件中，导入配置好的axios实例：
import request from '@/utils/request';
export default {
methods: {
fetchData() {
request.get('/user/info').then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
}
}
}拦截器的常见应用场景
- 添加全局请求头：如自动添加
Authorizationtoken。 - 请求参数处理：统一序列化请求参数。
- 响应数据格式化：提取后端返回的通用数据结构。
- 错误统一处理：根据HTTP状态码跳转页面或提示错误信息。
注意事项
- 拦截器的
config对象包含请求的URL、方法、headers等配置，需确保修改后返回该对象。 - 错误处理中建议使用
Promise.reject传递错误，便于组件中捕获。 - 对于大型项目，可将拦截器逻辑拆分为独立模块，便于维护。
