Vue 与后端交互（二）：Axios 拦截器与高级应用
在上一篇文章中，我们学习了 Axios 的基本用法，包括如何发送不同类型的 HTTP 请求以及基本的配置选项。本文将深入剖析 Axios 的拦截器功能，探讨请求拦截器和响应拦截器的作用、配置方法和应用场景，通过实例展示如何利用拦截器优化前后端交互流程。
一、Axios 拦截器概述
Axios 拦截器是 Axios 提供的一项强大功能，允许开发者在请求发送前和响应返回后进行拦截处理。通过拦截器，可以实现诸如添加请求头、处理请求超时、统一处理响应错误等多种功能，有效优化前后端交互流程，提升代码的可维护性和可读性。
二、请求拦截器
（一）作用
请求拦截器主要用于在请求发送前对请求进行处理，常见的应用场景包括：
添加认证头信息（如 Token）
修改请求数据格式
添加请求加载状态提示
处理请求超时
（二）配置方法
// 添加请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
console.log('请求拦截器:', config.method, config.url);
// 例如，添加认证头信息
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
// 添加请求加载状态提示
// 可以在这里显示 loading 状态
// this.showLoading(); （在 Vue 组件中）
return config;
},
error => {
// 对请求错误做些什么
console.error('请求错误:', error);
return Promise.reject(error);
}
);（三）应用场景实例
1. 添加认证头信息
在用户登录后，通常需要在后续请求中携带认证信息（如 Token），以便后端验证用户身份。通过请求拦截器，可以在每个请求发送前自动添加认证头信息。
// 添加请求拦截器 - 添加认证头信息
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});2. 处理请求超时
可以在请求拦截器中设置请求超时时间，并在超时时进行相应的处理。
// 添加请求拦截器 - 处理请求超时
axios.interceptors.request.use(config => {
config.timeout = 5000; // 设置超时时间为 5000 毫秒
return config;
});3. 添加请求加载状态提示
在发送请求时，显示加载状态提示，提升用户体验。可以在请求拦截器中显示加载提示，在响应拦截器中隐藏加载提示。
// 在 Vue 组件中
export default {
data() {
return {
loading: false
};
},
mounted() {
this.setupIntercep