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

目录

• 前言
• [1. Axios 简介与拦截器概念](#1. Axios 简介与拦截器概念)
• • [1.1 Axios 的特点](#1.1 Axios 的特点)
  • [1.2 什么是拦截器](#1.2 什么是拦截器)
• [2. 请求拦截器的应用与实践](#2. 请求拦截器的应用与实践)
• • [2.1 请求拦截器的作用](#2.1 请求拦截器的作用)
  • [2.2 请求拦截器实现](#2.2 请求拦截器实现)
• [3. 响应拦截器的应用与实践](#3. 响应拦截器的应用与实践)
• • [3.1 响应拦截器的作用](#3.1 响应拦截器的作用)
  • [3.2 响应拦截器实现](#3.2 响应拦截器实现)
• [4. 综合实例：一个完整的 Axios 配置](#4. 综合实例：一个完整的 Axios 配置)
• [5. 使用拦截器的好处与注意事项](#5. 使用拦截器的好处与注意事项)
• • [5.1 优势](#5.1 优势)
  • [5.2 注意事项](#5.2 注意事项)
• 结语

前言

在前端开发中，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'); // 从本地存储获取 token
    if (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 拦截器，会让开发过程更加高效。