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

前言
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 环境下运行。它提供了许多开箱即用的功能，比如：

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

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

1.2 什么是拦截器

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

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

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

在这里插入图片描述

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'); // 从本地存储获取 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;