手机app定制开发公司网站seo计划
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