Axios网络请求库核心特性与拦截器封装实践

文章目录

• 前言
• [一、 什么是 Axios？](#一、 什么是 Axios？)
• [二、 Axios 的四大核心特性](#二、 Axios 的四大核心特性)
• • [2. 1 基于 Promise，支持 async/await](#2. 1 基于 Promise，支持 async/await)
  • [2.2 同时支持浏览器端和 Node.js 端（同构）](#2.2 同时支持浏览器端和 Node.js 端（同构）)
  • [2.3 极其强大的"拦截器"（Interceptors）](#2.3 极其强大的“拦截器”（Interceptors）)
  • [2.4 自动转换 JSON 数据](#2.4 自动转换 JSON 数据)
• [三、 为什么不用原生 API？](#三、 为什么不用原生 API？)
• [四、 Axios 的核心工作原理](#四、 Axios 的核心工作原理)
• • [4.1 适配器模式（Adapter Pattern）](#4.1 适配器模式（Adapter Pattern）)
  • [4.2 拦截器链的执行顺序](#4.2 拦截器链的执行顺序)
• [五、 高频实操代码示例](#五、 高频实操代码示例)
• 结语

前言

在前端与后端的数据交互中，一个优雅的网络请求库能极大提升开发效率。本文从Axios的核心特性出发，深入解析其基于Promise的异步设计、拦截器机制与适配器模式，并对比原生API的演进历程，带你掌握从基础使用到二次封装的完整实践路径。

一、 什么是 Axios？

Axios 是一个基于 Promise 的网络请求库，专门用于在浏览器 和 node.js 环境中发送 HTTP 请求。

简单来说，它是前端（浏览器）与后端（服务器）之间的一座数据桥梁。当网页需要向服务器获取数据（如登录、获取商品列表）或提交数据（如注册、发表评论）时，就可以通过 Axios 来实现。

二、 Axios 的四大核心特性

Axios 之所以能打败原生的 XHR 和 Fetch，主要是因为它具备以下几个极其好用的特性：

2. 1 基于 Promise，支持 async/await

传统的网络请求（如旧版的 jQuery AJAX）使用回调函数，很容易陷入"回调地狱"。Axios 完全基于 ES6 的 Promise 规范，代码写起来非常优雅、可读性极高，并且天然支持 async/await 异步语法。

2.2 同时支持浏览器端和 Node.js 端（同构）

这是一个非常强大的特性。在浏览器端，Axios 底层利用的是浏览器自带的 XMLHttpRequest 对象；而当它在 Node.js 环境下运行时，它会自动切换并使用 Node 原生的 http 模块。这意味着同一套 Axios 代码，既能跑在前端，也能跑在后端。

2.3 极其强大的"拦截器"（Interceptors）

拦截器是 Axios 的杀手级功能。它允许我们在请求发送出去之前 ，或者在响应到达业务代码之前，对它们进行统一拦截和处理。

• 请求拦截器（Request Interceptor） ：常用于在所有请求头中自动拼接 JWT Token、展示全局加载动画（Loading）。
• 响应拦截器（Response Interceptor） ：常用于统一处理错误码（如监听到 401 自动跳转登录页）、统一提取后端返回的真正数据主体（解包 response.data）。

2.4 自动转换 JSON 数据

在原生请求中，服务器返回的文本通常需要我们手动调用 JSON.parse(data) 转化为 JS 对象。而 Axios 非常智能，如果发现响应头里是 JSON 格式，它会自动帮你转换好，拿来即用。

三、 为什么不用原生 API？

要深刻理解 Axios 的优秀，我们需要看看前端网络请求的发展史：

原生 XHR (繁琐)  ──>  jQuery AJAX (过渡)  ──>  原生 Fetch (新标准)  ──>  Axios (现代最佳实践)

1. XMLHttpRequest (XHR)：最古老的原生 API。配置极其繁琐，代码冗长，不支持 Promise，现代开发基本弃用。
2. Fetch API ：浏览器新一代的原生标准。虽然支持 Promise，但它有很多"反人类"的设计：
   • 它不会自动将错误状态码（如 404, 500）判定为 catch 失败，需要手动写 if (response.ok)。
   • 提取数据需要二次等待（如 await response.json()）。
   • 不支持请求取消 （需要引入复杂的 AbortController），也没有原生的拦截器机制。

Axios 正是弥补了 Fetch 的所有缺陷，做到了开箱即用和完美封装。

四、 Axios 的核心工作原理

Axios 的底层设计非常巧妙，核心主要有两个机制：适配器模式 和拦截器链。

4.1 适配器模式（Adapter Pattern）

为了实现浏览器和 Node.js 的双重支持，Axios 内部实现了一个叫 dispatchRequest 的方法，它会根据当前运行环境自动分发：

// Axios 内部伪代码逻辑
function getDefaultAdapter() {
  if (typeof XMLHttpRequest !== 'undefined') {
    // 浏览器环境：使用 XHR 适配器
    return require('./adapters/xhr');
  } else if (typeof process !== 'undefined') {
    // Node.js 环境：使用 http 模块适配器
    return require('./adapters/http');
  }
}

4.2 拦截器链的执行顺序

Axios 内部将【请求拦截器】、【真正发起请求的派发器】、【响应拦截器】组合成了一个双向链表/数组。 它的执行顺序就像剥洋葱：

1. 请求开始 → 先执行请求拦截器（从后往前，或按注册顺序）。
2. 到达最核心 → 发起真正的 HTTP 网络请求，等待服务器响应。
3. 拿到响应 → 经过响应拦截器（从前往后）。
4. 最终吐给页面上的 .then() 或 await 变量。

五、 高频实操代码示例

在实际开发中，我们通常不会直接用 axios.get，而是会进行二次封装（例如新建一个 request.js）：

import axios from 'axios';

// 1. 创建一个通用的 axios 实例
const service = axios.create({
  baseURL: 'https://api.example.com', // 自动拼接的基础 URL
  timeout: 5000 // 请求超时时间
});

// 2. 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做点什么，比如携带 Token
    const token = localStorage.getItem('user_token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 3. 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    const res = response.data; // 直接提取后端返回的业务数据
    if (res.code !== 200) {
      console.error('业务报错：' + res.message);
      return Promise.reject(new Error(res.message || 'Error'));
    }
    return res;
  },
  error => {
    // 统一处理 HTTP 状态码错误（如 403, 500 等）
    if (error.response && error.response.status === 401) {
      alert('登录已过期，请重新登录');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

export default service;

结语

Axios 是一个集大成者。它不仅帮我们抹平了浏览器和 Node.js 环境的差异，更通过 Promise 语法、自动 JSON 转换和强大的拦截器机制，极大地提升了前端开发者的体验。掌握 Axios 的封装与使用，是每一位现代前端工程师的必修课。