vue实现http拦截
实现HTTP拦截的方法
在Vue中实现HTTP拦截通常使用Axios库，因其内置拦截器功能。以下为具体实现方式：
安装Axios
通过npm或yarn安装Axios依赖：
npm install axios
# 或
yarn add axios创建Axios实例并添加拦截器
在项目入口文件（如main.js）或单独的工具文件中配置拦截器：
import axios from 'axios';
// 创建实例
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});
// 请求拦截器
instance.interceptors.request.use(
config => {
// 在发送请求前处理逻辑（如添加token）
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
// 对响应数据预处理
return response.data;
},
error => {
// 统一处理错误（如401跳转登录）
if (error.response.status === 401) {
window.location.href = '/login';
}
return Promise.reject(error);
}
);
// 导出实例供全局使用
export default instance;在Vue组件中使用拦截后的实例
在组件中直接导入配置好的实例发起请求：
import http from '@/utils/axios'; // 假设实例文件路径
export default {
methods: {
fetchData() {
http.get('/user')
.then(data => console.log(data))
.catch(error => console.error(error));
}
}
}可选：全局挂载实例
如需全局调用，可在main.js中将实例挂载到Vue原型上：
import Vue from 'vue';
import axiosInstance from './utils/axios';
Vue.prototype.$http = axiosInstance;组件内调用方式变为：
this.$http.get('/user').then(...);注意事项
- 请求/响应数据处理：拦截器中需确保返回正确的config或data对象。
- 错误处理：建议在拦截器和具体请求中同时处理错误，避免遗漏。
- 取消请求：可通过
CancelToken实现请求取消逻辑。
通过以上步骤，可完整实现Vue项目中的HTTP请求和响应拦截功能。
