从500ms到3ms,你还在用axios吗?




今天在推上看到一位推友 @illyism 说:Axios 在发送特性 auth 请求头会造成请求发送缓慢,替换后耗时由 500ms 下降至 3ms

Fun fact: I removed axios and I got +200% better latency. They have some bug causing slowdowns when sending auth headers. Literally went from 500ms to 3ms 🤯

看到此消息,表示很震惊!😱

对于前端开发者来说,80% 以上的项目都在使用 axios 模块。axios 真有此 Bug 吗?如果不用 axios,有哪些完美平替方案?

Axios 为何如此优秀?

Axios 是一个基于 Promise 的 HTTP 库,它的使用方法和API与 jQuery 的 Ajax 有很多相似之处。它既可以使用在浏览器端(XMLHttpRequest),也可以使用于服务器端(http模块)。对于前后端同构、SSR类型项目尤其有用,一份代码可以在前、后端运行。

Axios 的主要特性有:

  1. 支持 Promise API
  2. 拦截请求和响应,在请求前添加授权和响应前做一些特性处理。
  3. 转换请求和响应数据,对请求进行加密或者响应数据加密。
  4. 支持取消请求
  5. 自动转换 JSON 数据
  6. 自动将数据对象序列化为 multipart/form-datax-www-form-urlencoded 主体编码
  7. 客户端支持防御XSRF

Axios 的平替方案

如果我们不使用 axios,可平替的方案有 got、node-fetch、ky、superagent,这些模块都比较常见,从下面的 NPM Trends 图可以出来也都比较受欢迎。

从上图可以看出,axios 和 node-fetch 下载量最多,也最受欢迎。

下面再来看看不同库之间的对比:


从上图可以看出,相比 axios,got 支持的功能更为健全。它几乎与浏览器的 fetch API 兼容,使用时需要手动切换协议,不接受 PUSH 流,也不重复使用 HTTP/2 会话。比较遗憾的是 got 不支持在浏览器上使用。

关于 Fetch API

近些年,随着浏览器的发展,Fetch API 已经被所有现代浏览器所支持。在 Node.js 21 中 Fetch API 已经提升至稳定版本,这将对实现前后同构的项目带来更多方便。

最后推荐一个更好的 Fetch API,ofetch可以在 Node.js、浏览器端以及Worker上运行是,可以用来完美平替 axios。

https://github.com/unjs/ofetch

快速安装:

# npm
npm i ofetch

# yarn
yarn add ofetch

导入:

// ESM / Typescript
import { ofetch } from "ofetch";

// CommonJS
const { ofetch } = require("ofetch");

如果还有其他更好的 HTTP 库,可以在文末留言讨论。

相关推荐

  • 华为自用的时序数据库开源啦,来看看水平怎么样?
  • 云开源公司成“恶龙”?——指控Linux基金会旗下开源项目盗用代码
  • 刘强东 AI 数字人将开启直播;淘宝上线苹果Vision Pro;特斯拉高级副总裁宣布离职 | 极客头条
  • 李彦宏:开源模型会越来越落后,自然语言将成为新的通用编程语言
  • 好多人啊!OceanBase 开发者大会·2024全议程公布
  • 两家知名云服务商遭诈骗 350 万美元,黑客挖矿赚取 100 万美元后被抓!
  • 4个令人惊艳的开源项目,诞生了!
  • Gemini Ultra训练烧掉近2亿美元!斯坦福迄今最全AI报告发布,中国AI专利数遥遥领先
  • 向用不起的AI宣战!宇视掀起“装备大模型化”变革
  • 跟这些头部厂商交流后,终于知道AIGC、大模型持续火爆的原因
  • 百度公开12个月打造AI原生应用思路!李彦宏再谈开源大模型!百度智能计算OS万源亮相,百度内部移动生态大变天!
  • 今日arXiv最热NLP大模型论文:一文读懂大模型的prompt技术
  • 李飞飞团队发布《2024年人工智能指数报告》,预测人工智能未来发展趋势
  • Lyft 如何利用 iOS 实时活动来提升用户体验
  • AI 数据中心的能源困境
  • AI 时代,这个团队正在打造全世界最复杂的高性能编辑器
  • 探索第三代指标平台:全新指标开发方法与复杂指标配置定义实践
  • 物化视图在 MaxCompute 中的探索与实践
  • 腾讯二面:@Bean 与 @Component 用在同一个类上,会怎么样?
  • 刘强东数字人首秀