Axios项目：让 HTTP 请求变得优雅而强大的 Promise 客户端
你是否曾经被这些问题困扰过？在浏览器里用 XMLHttpRequest 写回调地狱、在 Node.js 中手动拼接 http.request 的参数、为了给每个接口加上统一的 Token 和错误提示而复制粘贴一大段重复代码……Axios 的出现，就是为了彻底终结这些烦恼。它是一个基于 Promise 的 HTTP 客户端，同时支持浏览器和 Node.js，用同一套 API 覆盖前后端所有网络请求场景。本文将带你全面了解这个几乎”人手一份”的前端基础设施。
截至收录：
Axios项目stars数：109201
Axios项目forks数：11856
Axios项目目录截图
Axios项目核心亮点
- 🌐 同构同源，一套代码两端跑：你可以在浏览器中发起
XMLHttpRequest，也可以在 Node.js 中发起http请求，API 完全一致。这意味着你的请求封装层、拦截器逻辑、错误处理代码可以在前后端之间直接复用，不必为运行时差异重写两遍。 - 🪝 拦截器（Interceptors），全局逻辑一处搞定：请求拦截器可以统一注入 Token、埋点、设置签名；响应拦截器可以统一处理 401 跳转登录、超时提示、业务错误码转换。还支持
eject()移除、clear()清空，以及synchronous、runWhen等精细控制选项。 - 🔄 智能数据转换，告别手动 JSON.parse：请求体自动序列化为 JSON，响应自动解析；设置
Content-Type: multipart/form-data时对象会自动转成 FormData，设置为application/x-www-form-urlencoded时自动转成表单编码，嵌套对象、数组、File、Blob、Stream 都能正确处理。 - 🛑 完善的取消与超时机制：支持标准的
AbortController/AbortSignal（推荐），同时保留向后兼容的CancelToken。配合timeout配置和transitional.clarifyTimeoutError，可以精确区分”超时”和”被取消”两类错误。 - 🔒 内置安全防护：自动读取 XSRF Cookie 并写入请求头防止跨站请求伪造；
sensitiveHeaders可在跨域重定向时剥离X-API-Key等密钥头；maxContentLength/maxBodyLength防御解压炸弹；maxDepth限制序列化递归深度，抵御深层嵌套 payload 造成的 DoS 攻击。 - 🧩 多适配器架构，可插拔的底层实现：内置
xhr、http、fetch三种适配器，可按环境自动选择或显式指定；自 v1.7.0 引入 Fetch 适配器，v1.12.0 起支持自定义 fetch（如 Tauri、SvelteKit 的load函数场景）；v1.13.0 起 Node.js 适配器还带来了实验性的 HTTP/2 支持。 - 📘 一流的 TypeScript 支持：内置类型定义与
axios.isAxiosError()、axios.isCancel<T>()类型守卫，AxiosRequestConfig<D, P>可分别标注请求体与查询参数类型，甚至支持通过模块增强（module augmentation）声明 symbol 键的自定义配置项。
Axios项目快速开始
只需几步，你就能在项目中跑起 axios：
- 安装（任选其一）：
bash
$ npm install axios # npm
$ yarn add axios # yarn
$ pnpm add axios # pnpm
$ bun add axios # bun
$ deno add axios # deno或者直接在浏览器中使用 CDN（ES5 UMD 模块）：
html
<script src="https://cdn.jsdelivr.net/npm/axios@1.13.2/dist/axios.min.js"></script> - 发起你的第一个请求：
“`javascript
import axios from axios ;try {
// 推荐使用 params 传参，可读性更好，且会自动拼接查询字符串
const response = await axios.get( /user , {
params: { ID: 12345 },
timeout: 5000, // 生产环境务必设置超时，避免请求无限挂起
});
console.log(response.data);
} catch (error) {
console.error(error);
}
“` - 创建一个带统一配置的实例（实战中最常用的方式）：
“`javascript
const instance = axios.create({
baseURL: https://api.example.com ,
timeout: 10000,
});// 请求拦截器：统一注入 Token
instance.interceptors.request.use((config) => {
config.headers.set( Authorization ,Bearer ${getToken()});
return config;
});// 响应拦截器：统一剥离业务数据
instance.interceptors.response.use(
(response) => response.data,
(error) => Promise.reject(error)
);const user = await instance.get( /user/12345 );
“` - 上传文件时也一样简单：
javascript
// 自动识别 FormData，无需手动设置 Content-Type
await axios.postForm( https://httpbin.org/post , {
myVar: foo ,
file: document.querySelector( #fileInput ).files[0],
});
Axios项目应用场景
- 单页应用（SPA）的数据层：在 React、Vue、Angular 等框架中作为统一的数据请求层，配合拦截器实现 Token 刷新、Loading 控制、错误上报与重试策略。
- Node.js 服务端集成与数据聚合：在 BFF（Backend for Frontend）层调用多个上游微服务并聚合结果，利用
Promise.all并发请求；responseType: stream还能把远端图片或大文件直接管道写入本地磁盘。 - 文件上传下载与进度反馈：借助
onUploadProgress/onDownloadProgress实时获取loaded、total、progress、rate等指标，构建体验友好的上传进度条；maxRate还能在 Node.js 环境限制上传/下载速率。 - SSR 与桌面端框架集成：在 SvelteKit 的
load函数中使用其自定义fetch，或在 Tauri 应用中注入平台fetch绕过 CORS 限制，只需配置adapter: fetch与env.fetch即可无缝接入。 - 自动化测试与接口调试：通过自定义
adapter返回 mock Promise，无需启动真实服务即可对上层业务逻辑进行单元测试。
用户案例：由于其零依赖、体积小、API 稳定，Axios 已成为 JavaScript 生态中使用最广泛的 HTTP 客户端之一，被无数企业级应用、开源项目与脚手架模板默认采用，长期稳居 npm 下载量榜单前列。
Axios项目链接
axios / axios项目地址：https://github.com/axios/axios
本文地址：https://www.tgoos.com/46393
