Vue.js教学第十八章：Vue 与后端交互（二）：Axios 拦截器与高级应用

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