使用 Axios 拦截器优化 HTTP 请求与响应的实践

前言

在前端开发中，HTTP 请求是与后端交互的重要方式。为了提高代码的可维护性、复用性以及用户体验，使用 Axios 拦截器是非常常见的做法。通过拦截器，我们可以集中管理请求和响应的逻辑，比如配置请求头、处理错误信息等。本文将详细介绍如何使用 Axios 的请求拦截器和响应拦截器，并结合实践案例，分享如何让拦截器为开发效率和代码质量保驾护航。

1. Axios 简介与拦截器概念

1.1 Axios 的特点

Axios 是一个基于 Promise 的 HTTP 库，支持在浏览器和 Node.js 环境下运行。它提供了许多开箱即用的功能，比如：

• 请求和响应的拦截。
• 自动转换 JSON 数据。
• 超时设置和取消请求。
• 支持跨域。
• 客户端防御 XSRF 攻击等。

这些功能让 Axios 成为目前主流的 HTTP 请求库之一。

1.2 什么是拦截器

拦截器是 Axios 提供的一种机制，它允许开发者在请求发送前或响应到达后对数据进行统一处理。具体分为：

1. 请求拦截器：拦截并处理即将发出的请求，比如添加统一的请求头、添加认证 token 等。
2. 响应拦截器：拦截并处理收到的响应，比如解析数据结构、统一处理错误提示等。

使用拦截器可以显著简化代码逻辑，并提高复用性。

2. 请求拦截器的应用与实践

2.1 请求拦截器的作用

请求拦截器主要用于处理以下场景：

• 添加统一的请求头：比如设置 Content-Type、添加认证 Token。
• 记录和调试：对每一个请求打印日志，便于调试和监控。
• 预处理请求数据：在发送请求之前对数据格式进行处理。

2.2 请求拦截器实现

以下是一个基本的请求拦截器实现示例：

// 引入 axios
import 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'); // 从本地存储获取 tokenif (token) {config.headers['Authorization'] = `Bearer ${token}`; // 为每个请求添加认证信息}return config;},error => {// 处理请求错误console.error('请求错误:', error);return Promise.reject(error);}
);export default instance;

在这个实现中，我们完成了：

1. 设置基础 URL：通过 axios.create 设置公共的 API 地址。
2. 添加请求头：为每个请求设置 Content-Type 和 Authorization。
3. 错误处理：捕获请求配置过程中的错误并打印日志。

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);}
);

在这个实现中，我们完成了：

1. 数据提取：直接返回后端数据中的 data 部分。
2. 错误提示：根据不同的状态码给出提示，比如未授权、服务器错误等。
3. 网络异常处理：当服务器无法响应时，给出通用提示。

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 优势

1. 代码复用：将公共逻辑集中到拦截器中，减少重复代码。
2. 提高维护性：当需求变更时，只需修改拦截器即可应用到所有请求。
3. 增强用户体验：通过统一的错误处理，提升应用的稳定性和友好性。

5.2 注意事项

• 拦截器顺序：多个拦截器时，执行顺序与注册顺序一致。use 方法中的第一个函数处理成功，第二个函数处理错误。
• 避免无限循环：在拦截器中若对请求进行重试或修改，应小心避免引发递归调用。
• 捕获错误：确保所有 Promise 都有正确的错误处理，避免意外崩溃。

结语

请求拦截器和响应拦截器的灵活性和强大功能，使得它在项目开发中广受欢迎。合理使用拦截器，可以帮助我们减少冗余代码，提高代码的可读性和维护性。在项目中使用 Axios 拦截器，会让开发过程更加高效。