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 的优秀，我们需要看看前端网络请求的发展史：

plaintext 复制代码

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

XMLHttpRequest (XHR)：最古老的原生 API。配置极其繁琐，代码冗长，不支持 Promise，现代开发基本弃用。
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 的方法，它会根据当前运行环境自动分发：

javascript 复制代码

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

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

五、高频实操代码示例

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