文章目录Axios前端最流行的 HTTP 请求库109K Star 还在涨它解决什么问题核心能力基本用法配置和实例拦截器社区生态Axios前端最流行的 HTTP 请求库109K Star 还在涨axios 在 GitHub 上已经拿到 109K Star 了。这个基于 Promise 的 HTTP 客户端能同时在浏览器和 Node.js 环境运行。从 2014 年发布到现在一直是 JavaScript 生态里 HTTP 请求的首选方案。它解决什么问题前端开发者每天都要跟后端接口打交道。原生的 XMLHttpRequest 写起来啰嗦fetch 虽然原生支持但缺少一些实用功能——比如请求拦截、进度监控、超时取消。axios 把这些能力打包成一个简洁的 API。发一个 GET 请求只需要一行代码返回的就是 Promise配合 async/await 使用体验很流畅。核心能力浏览器和 Node.js 双端支持。一套 API 在两套环境表现一致代码可以复用。拿到数据后自动转 JSON不需要手动解析。请求和响应拦截器。这是 axios 最受欢迎的功能之一。在请求发出前统一加 token、在收到响应后统一处理错误都在拦截器里完成。内置取消请求。支持 AbortController 和 CancelToken 两种方式。用户切换页面时取消正在进行的请求是一个很常见的优化手段。自动序列化。数据对象自动转成multipart/form-data或application/x-www-form-urlencoded格式不需要手动拼字符串。客户端 CSRF 防护。浏览器端内置了跨站请求伪造的防护机制。基本用法安装方式很简单npm、yarn、pnpm、bun、Deno 都支持npminstallaxiosGET 请求import axios from axios; const response await axios.get(/user?ID12345);POST 请求const response await axios.post(/user, { firstName: Fred, lastName: Flintstone });同时发多个请求const [user, permissions] await Promise.all([ axios.get(/user/12345), axios.get(/user/12345/permissions) ]);配置和实例axios 支持全局默认配置也支持创建自定义实例。创建一个自定义实例可以有自己的 baseURL、超时时间和请求头const api axios.create({ baseURL: https://api.example.com, timeout: 5000, headers: {X-Custom-Header: foobar} });实例的配置可以覆盖全局默认值每个请求的配置又可以在实例的基础上继续覆盖。拦截器拦截器是 axios 最核心的扩展机制。请求发出前可以修改配置或添加 token收到响应后可以统一处理错误// 请求拦截器统一加 Token axios.interceptors.request.use(config { config.headers.Authorization Bearer ${localStorage.getItem(token)}; return config; }); // 响应拦截器统一处理 401 axios.interceptors.response.use( response response, error { if (error.response?.status 401) { // 跳转到登录页 } return Promise.reject(error); } );多个拦截器会按注册顺序依次执行前一个的返回值传给后一个。社区生态npm 上 axios 的周下载量一直排在前列几乎每个 JavaScript 项目都会直接或间接依赖它。TypeScript 支持完善类型定义内置在包中。项目目前由社区维护贡献者超过 800 人持续在迭代 v1.x 版本包括 fetch adapter、HTTP/2 支持等新能力也在逐步加入。接依赖它。TypeScript 支持完善类型定义内置在包中。项目目前由社区维护贡献者超过 800 人持续在迭代 v1.x 版本包括 fetch adapter、HTTP/2 支持等新能力也在逐步加入。