Axios:10 万 Star 的 HTTP 请求库,前端后端都在用
文章目录Axios10 万 Star 的 HTTP 请求库前端后端都在用Axios10 万 Star 的 HTTP 请求库前端后端都在用Axios 是一个基于 Promise 的 HTTP 客户端同时支持浏览器和 Node.js 环境。目前在 GitHub 上收获了超过 10 万 Star是 JavaScript 生态中使用最广泛的网络请求库之一。为什么选 Axios原生的 fetch API 在实际项目中用起来并不顺手。请求拦截、响应转换、错误处理这些常见需求fetch 都要自己从头写。Axios 把这些都封装好了开箱即用。浏览器端走 XMLHttpRequestNode.js 端走 http 模块调用方式完全一致。一套代码两个环境都能跑不用关心底层差异。核心功能请求和响应拦截器是 Axios 最实用的能力。比如你在项目里需要统一给所有请求加 Token用拦截器几行代码就搞定axios.interceptors.request.use(function(config){config.headers.AuthorizationBearer token;returnconfig;});响应拦截器也一样。后端返回的错误码统一在一处处理不用每个请求都写一遍 catch。Axios 会自动把 JSON 数据序列化和反序列化请求时自动转成 JSON 字符串响应时自动解析成对象。发送表单数据也支持FormData 和 URLSearchParams 都能自动序列化。请求取消功能通过 AbortController 实现。页面切换时取消未完成的请求避免接口响应顺序错乱的问题。Axios 内置了 CSRF 防护通过 cookie 自动携带 XSRF-TOKEN在跨站请求场景下提供基本安全保障。基本用法安装通过包管理器即可npminstallaxios发起 GET 请求constresponseawaitaxios.get(/user,{params:{ID:12345}});console.log(response.data);发起 POST 请求constresponseawaitaxios.post(/user,{firstName:Fred,lastName:Flintstone});可以创建自定义实例设置全局默认值constinstanceaxios.create({baseURL:https://api.example.com,timeout:5000,headers:{X-Custom-Header:custom-value}});TypeScript 支持Axios 从 1.x 版本开始内置 TypeScript 类型定义。请求配置、响应数据都有完整的类型提示不需要额外安装 types 包。配合泛型可以精确约束请求参数和返回结构interfaceUser{id:number;name:string;}constresponseawaitaxios.getUser(/user/1);// response.data 自动推断为 User 类型浏览器兼容性支持 Chrome、Firefox、Safari、Opera、Edge 最新版本。也提供 CDN 方式引入适合不使用构建工具的场景。Axios 在 HTTP 请求这个细分领域做到了功能完整、API 简洁。10 万 Star 的数据说明了它在开发者群体中的接受度。如果你的项目还在手写 fetch可以考虑换过来试试。s 在 HTTP 请求这个细分领域做到了功能完整、API 简洁。10 万 Star 的数据说明了它在开发者群体中的接受度。如果你的项目还在手写 fetch可以考虑换过来试试。