请求拦截器 和 响应拦截器 是 axios 提供的强大功能，用于在请求发送前和响应返回后统一处理某些逻辑。它们的作用和具体用法如下：
1. 请求拦截器
作用
在请求发送之前，对请求配置进行统一处理。例如：
- 添加请求头（如
Authorization）。 - 修改请求参数。
- 显示加载状态。
用法
通过 axios.interceptors.request.use 方法注册请求拦截器。
示例
instance.interceptors.request.use((config) => {// 在请求发送之前做一些处理const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`; // 添加 token 到请求头}return config; // 返回处理后的配置},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);
场景
- 添加认证信息（如
token）。 - 统一添加请求头（如
Content-Type）。 - 在发送请求前显示加载动画。
2. 响应拦截器
作用
在响应返回之后，对响应数据进行统一处理。例如：
- 统一处理错误状态码。
- 提取响应数据。
- 隐藏加载状态。
用法
通过 axios.interceptors.response.use 方法注册响应拦截器。
示例
instance.interceptors.response.use((response) => {// 对响应数据做些什么const { code, message, data } = response.data;if (code === 0) {return data; // 返回实际数据} else {ElMessage.error(message || '请求失败'); // 显示错误提示return Promise.reject(new Error(message || '请求失败')); // 抛出错误}},(error) => {// 对响应错误做些什么ElMessage.error(error.message || '网络错误'); // 显示网络错误提示return Promise.reject(error); // 抛出错误}
);
场景
- 统一处理后端返回的错误码。
- 提取响应中的实际数据。
- 在响应返回后隐藏加载动画。
完整示例
以下是一个完整的 request.ts 文件，包含请求拦截器和响应拦截器的实现：
import axios from 'axios';
import { ElMessage } from 'element-plus';// 创建 axios 实例
const instance = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL, // 基础 URLtimeout: 10000, // 请求超时时间
});// 请求拦截器
instance.interceptors.request.use((config) => {// 在发送请求之前做些什么const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`; // 添加 token 到请求头}return config; // 返回处理后的配置},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use((response) => {// 对响应数据做些什么const { code, message, data } = response.data;if (code === 0) {return data; // 返回实际数据} else {ElMessage.error(message || '请求失败'); // 显示错误提示return Promise.reject(new Error(message || '请求失败')); // 抛出错误}},(error) => {// 对响应错误做些什么ElMessage.error(error.message || '网络错误'); // 显示网络错误提示return Promise.reject(error); // 抛出错误}
);// 封装常用请求方法
export const request = {get(url, params = {}) {return instance.get(url, { params });},post(url, data = {}) {return instance.post(url, data);},put(url, data = {}) {return instance.put(url, data);},delete(url, params = {}) {return instance.delete(url, { params });},
};export default request;
使用示例
1. 发送 GET 请求
import { request } from '@/utils/request';const fetchData = async () => {try {const data = await request.get('/api/data');console.log(data);} catch (error) {console.error('请求失败:', error);}
};
2. 发送 POST 请求
import { request } from '@/utils/request';const submitForm = async () => {try {const response = await request.post('/api/submit', { name: 'John' });console.log(response);} catch (error) {console.error('提交失败:', error);}
};
总结
- 请求拦截器：用于在请求发送前统一处理逻辑（如添加请求头）。
- 响应拦截器：用于在响应返回后统一处理逻辑（如提取数据、处理错误）。
- 优势：减少重复代码，提高代码可维护性，统一处理公共逻辑。
通过合理使用请求拦截器和响应拦截器，可以显著提升代码质量和开发效率。
