vue实现http拦截
Vue 中实现 HTTP 拦截
在 Vue 中，通常使用 axios 作为 HTTP 客户端，并通过其拦截器功能实现请求和响应的拦截。以下是实现 HTTP 拦截的具体方法：
安装 axios
确保项目中已安装 axios，可以通过以下命令安装：
npm install axios创建 axios 实例并配置拦截器
在 src 目录下创建 utils/request.js 文件，用于封装 axios 实例和拦截器逻辑：
import axios from 'axios';
// 创建 axios 实例
const service = axios.create({
baseURL: 'https://api.example.com', // API 基础地址
timeout: 5000, // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
(config) => {
// 在发送请求前可以修改请求配置
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
// 处理请求错误
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
(response) => {
// 对响应数据做处理
const res = response.data;
if (res.code !== 200) {
// 处理业务逻辑错误
return Promise.reject(new Error(res.message || 'Error'));
}
return res;
},
(error) => {
// 处理 HTTP 错误（如 401、404 等）
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);
});
},
},
};全局错误处理
如果需要全局捕获未处理的请求错误，可以在 main.js 中注册全局错误处理逻辑：
import request from '@/utils/request';
request.interceptors.response.use(
(response) => response,
(error) => {
// 全局错误处理
console.error('HTTP Error:', error.message);
return Promise.reject(error);
}
);请求取消
通过 axios 的 CancelToken 可以取消请求，适用于页面切换时取消未完成的请求：
import axios from 'axios';
const CancelToken = axios.CancelToken;
let cancel;
request.get('/user/info', {
cancelToken: new CancelToken((c) => {
cancel = c;
}),
});
// 取消请求
cancel();通过以上方法，可以在 Vue 项目中高效地实现 HTTP 请求和响应的拦截，并统一处理错误、权限和业务逻辑。
