在前端开发中,HTTP请求是与后端交互的重要方式,为了提高代码的可维护性、复用性以及用户体验,使用Axios拦截器是非常常见的做法,本文将详细介绍如何使用Axios的请求拦截器和响应拦截器,需要的朋友可以参考下 
请求和响应的拦截。自动转换 JSON 数据。超时设置和取消请求。支持跨域。客户端防御 XSRF 攻击等。
目录
前言1. Axios 简介与拦截器概念1.1 Axios 的特点1.2 什么是拦截器2. 请求拦截器的应用与实践2.1 请求拦截器的作用2.2 请求拦截器实现3. 响应拦截器的应用与实践3.1 响应拦截器的作用3.2 响应拦截器实现4. 综合实例：一个完整的 Axios 配置5. 使用拦截器的好处与注意事项5.1 优势5.2 注意事项结语前言
在前端开发中，HTTP 请求是与后端交互的重要方式。为了提高代码的可维护性、复用性以及用户体验，使用 Axios 拦截器是非常常见的做法。通过拦截器，我们可以集中管理请求和响应的逻辑，比如配置请求头、处理错误信息等。本文将详细介绍如何使用 Axios 的请求拦截器和响应拦截器，并结合实践案例，分享如何让拦截器为开发效率和代码质量保驾护航。
1. Axios 简介与拦截器概念
1.1 Axios 的特点
Axios 是一个基于 Promise 的 HTTP 库，支持在浏览器和 Node.js 环境下运行。它提供了许多开箱即用的功能，比如：
这些功能让 Axios 成为目前主流的 HTTP 请求库之一。
1.2 什么是拦截器
拦截器是 Axios 提供的一种机制，它允许开发者在请求发送前或响应到达后对数据进行统一处理。具体分为：
请求拦截器：拦截并处理即将发出的请求，比如添加统一的请求头、添加认证 token 等。响应拦截器：拦截并处理收到的响应，比如解析数据结构、统一处理错误提示等。使用拦截器可以显著简化代码逻辑，并提高复用性。
2. 请求拦截器的应用与实践
2.1 请求拦截器的作用
请求拦截器主要用于处理以下场景：
添加统一的请求头：比如设置Content-Type、添加认证 Token。记录和调试：对每一个请求打印日志，便于调试和监控。预处理请求数据：在发送请求之前对数据格式进行处理。2.2 请求拦截器实现
以下是一个基本的请求拦截器实现示例：
// 引入 axiosimport axios from 'axios';// 创建 axios 实例const baseURL = 'http://localhost:8080';const instance = axios.create({ baseURL });// 添加请求拦截器instance.interceptors.request.use( config => { // 在请求发送前处理请求 config.headers['Content-Type'] = 'application/json'; // 设置统一的请求头 const token = localStorage.getItem('token'); // 从本地存储获取 token if (token) { config.headers['Authorization'] = `Bearer ${token}`; // 为每个请求添加认证信息 } return config; }, error => { // 处理请求错误 console.error('请求错误:', error); return Promise.reject(error); });export default instance;在这个实现中，我们完成了：
设置基础 URL：通过axios.create设置公共的 API 地址。添加请求头：为每个请求设置Content-Type和Authorization。错误处理：捕获请求配置过程中的错误并打印日志。3. 响应拦截器的应用与实践
3.1 响应拦截器的作用
响应拦截器主要处理以下场景：
提取核心数据：很多后端返回的数据结构是嵌套的，通过拦截器可以直接提取需要的核心数据。统一处理错误：捕获 HTTP 错误码并展示友好的提示。日志记录和调试：记录响应信息，便于分析问题。3.2 响应拦截器实现
以下是一个响应拦截器的示例：
// 添加响应拦截器instance.interceptors.response.use( response => { // 处理响应数据 const result = response.data; // 假设后端返回 { code: 200, data: {...}, message: '成功' } if (result.code !== 200) { // 如果返回码不是 200，认为请求失败 alert(result.message || '请求失败'); return Promise.reject(new Error(result.message)); } return result.data; // 直接返回核心数据 }, error => { // 处理响应错误 if (error.response) { // 根据 HTTP 状态码给出提示 const status = error.response.status; if (status === 401) { alert('未授权，请重新登录'); } else if (status === 500) { alert('服务器错误，请稍后重试'); } else { alert(`请求错误，状态码：${status}`); } } else { alert('网络错误，请检查您的网络连接'); } return Promise.reject(error); });在这个实现中，我们完成了：
数据提取：直接返回后端数据中的data部分。错误提示：根据不同的状态码给出提示，比如未授权、服务器错误等。网络异常处理：当服务器无法响应时，给出通用提示。4. 综合实例：一个完整的 Axios 配置
以下是将请求拦截器和响应拦截器结合的完整实现：
import axios from 'axios';const baseURL = 'http://localhost:8080';const instance = axios.create({ baseURL });// 请求拦截器instance.interceptors.request.use( config => { config.headers['Content-Type'] = 'application/json'; const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => { console.error('请求错误:', error); return Promise.reject(error); });// 响应拦截器instance.interceptors.response.use( response => { const result = response.data; if (result.code !== 200) { alert(result.message || '请求失败'); return Promise.reject(new Error(result.message)); } return result.data; }, error => { if (error.response) { const status = error.response.status; if (status === 401) { alert('未授权，请重新登录'); } else if (status === 500) { alert('服务器错误，请稍后重试'); } else { alert(`请求错误，状态码：${status}`); } } else { alert('网络错误，请检查您的网络连接'); } return Promise.reject(error); });export default instance;5. 使用拦截器的好处与注意事项
5.1 优势
代码复用：将公共逻辑集中到拦截器中，减少重复代码。提高维护性：当需求变更时，只需修改拦截器即可应用到所有请求。增强用户体验：通过统一的错误处理，提升应用的稳定性和友好性。5.2 注意事项
拦截器顺序：多个拦截器时，执行顺序与注册顺序一致。use方法中的第一个函数处理成功，第二个函数处理错误。避免无限循环：在拦截器中若对请求进行重试或修改，应小心避免引发递归调用。捕获错误：确保所有 Promise 都有正确的错误处理，避免意外崩溃。结语
请求拦截器和响应拦截器的灵活性和强大功能，使得它在项目开发中广受欢迎。合理使用拦截器，可以帮助我们减少冗余代码，提高代码的可读性和维护性。在项目中使用 Axios 拦截器，会让开发过程更加高效。
