JS HTTP 请求库哪家强?Axios,Request,Superagent,Fetch 还是 Supertest

简介: 本文将带你研究 5 个最流行的 HTTP 库,了解它们是如何实现的。 希望能帮你省下一些时间。

原文作者:Chidume Nnamdi

译者:UC 国际研发 Jothy

Web 开发中客户端与服务器间的交互非常重要,它有利于客户端应用高度动态化。用户通过单击按钮的交互方式向服务器发送请求,服务器检索数据并返回,页面无需重新加载,直接使用返回的数据重新渲染其部分/整体内容,或者对数据进行操作。

这其中的技术原理是 AJAX,通过 XMLHttpRequest 实例实现。 为了提升 AJAX 及 XMLHttpRequest 的使用体验,社区开发了一些无需处理 AJAX 和 XMLHttpRequest 就直接发出 HTTP 请求的库。

本文将带你研究 5 个最流行的 HTTP 库,了解它们是如何实现的。 希望能帮你省下一些时间。

提示:通过与 Bit 共享同步公共组件可以避免代码重复。 把相同的功能的代码变成共享组件,就可以随处使用它了,构建更快哟~赶紧试试看。

Axios

基于 Promise 的 HTTP 客户端,可用于浏览器和 Node.js

Axios 是一个基于 Promise 的 HTTP 库,可用在 Node.js 和浏览器上发起 HTTP 请求,支持所有现代浏览器,甚至包括 IE8+!

优点

  • 同时支持 Node.js 和浏览器
  • 支持 Promise API
  • 可以配置或取消请求
  • 可以设置响应超时
  • 支持防止跨站点请求伪造(XSRF)攻击
  • 可以拦截未执行的请求或响应
  • 支持显示上传进度
  • 广泛用于 React 和 Vue 项目

缺点

  • 用起来比较麻烦

Superagent

改良版 Ajax——与 Node.js HTTP 客户端搭配使用

Superagent 是一个基于 Promise 的轻量级渐进式 AJAX API,非常适合发送 HTTP 请求以及接收服务器响应。 与 Axios 相同,它既适用于 Node,也适用于所有现代浏览器。

用 Superagent 发起 HTTP 请求就像在 request 对象上调用方法一样简单:

image.png

优点

  • 它有一个插件生态,通过构建插件可以实现更多功能
  • 可配置
  • HTTP 请求发送接口友好
  • 可以为请求链式添加方法
  • 适用于浏览器和 Node
  • 支持显示上传和下载进度
  • 支持分块传输编码
  • 支持旧风格的回调
  • 繁荣的插件生态,支持众多常见功能

缺点

  • 其 API 不符合任何标准

Request

简化版 HTTP 请求客户端

Request 提供了一种简化的 HTTP 请求方式。 你可以使用比其他 HTTP 库更少的代码来发起 HTTP 请求。 它不是基于 Promise 的,但如果你需要 Promise,你可以引入request-promise 库,将请求封装为 Promise 并返回。

优点

  • API 简单易用

缺点

  • 不基于 Promise

Fetch

Fetch 是浏览器自带的用于发送请求的 API,旨在替代 XMLHttpRequest。

优点

  • 灵活易用
  • 使用 Promise 避免回调地狱
  • 支持所有现代浏览器
  • 遵循 request-response 方案
  • 语法简单清晰
  • 支持 React Native

缺点

  • 不支持服务器端使用
  • 缺乏开发库的亮点功能,比如取消请求
  • 没有内置默认值,如请求模式,请求头,请求凭据。

Supertest

Superagent 驱动,有一套流畅的 API 用于测试 Node.js HTTP 服务器

Supertest 用于测试 Node.js HTTP 服务器。 该库由 SuperAgent 提供支持,它把自身的 API 和 SuperAgent 的底层 API 相结合,提供简洁的 HTTP 测试接口。

优点

  • 流畅的 API
  • 简单的 HTTP 断言
  • 可以与 Chai.js 和 Mocha 等不同的测试套件混用

缺点

  • 不支持浏览器

总结

分析完热门 HTTP 库,你可能会问“我应该选择哪一个?”

我想说,选择哪个库取决于你的项目、规模和目标用户,每个选择都有好有坏。 如果你为误判规格选择了错误的库,那就得考虑下这个问题,重新选择合适的工具。

如果你有任何疑问或觉得有需要补充、更正或删除的,任何疑问都请随时发表评论,发邮件或直接私信我。 谢谢阅读!

原文地址:https://blog.bitsrc.io/comparing-http-request-libraries-for-2019-7bedb1089c83?gi=89b097d4bfd1

目录
相关文章
|
14天前
|
XML Java 数据格式
Servlet 教程 之 Servlet 客户端 HTTP 请求 3
该教程展示了如何在Servlet中处理客户端HTTP请求,特别是获取HTTP头信息。示例代码创建了一个名为`DisplayHeader`的Servlet,它扩展了`HttpServlet`并重写了`doGet`方法。在`doGet`中,使用`HttpServletRequest`的`getHeaderNames()`遍历所有头部,显示其名称和对应值。Servlet在TomcatTest项目下,通过`web.xml`配置映射到`/TomcatTest/DisplayHeader`路径。
29 14
|
14天前
|
安全 Java 网络安全
Servlet 教程 之 Servlet 客户端 HTTP 请求 2
Servlet教程介绍了如何在Servlet中处理HTTP请求,包括获取Cookie、头信息、参数、Session等。方法如:`getCookies()`、`getAttributeNames()`、`getHeaderNames()`、`getParameterNames()`等。还能获取身份验证类型、字符编码、MIME类型、请求方法、远程用户信息、URL路径、安全通道状态以及请求内容长度等。此外,可通过`getSession()`创建或获取Session,并以`Map`形式获取参数。
21 8
|
4天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript库与框架开发中的作用
【4月更文挑战第30天】TypeScript,微软开发的JavaScript超集,以其强类型和面向对象特性,正成为提升Web项目质量和效率的关键工具,尤其在库和框架开发中。它通过类型系统减少运行时错误,提供内置文档,便于重构,增强IDE支持,以及支持模块化。流行框架如React、Angular已支持TypeScript,未来有望成为开发高质量库和框架的标准语言。随着社区增长,TypeScript将在Web开发领域扮演更重要角色。
|
4天前
|
缓存 负载均衡 网络协议
【亮剑】一次完整的 HTTP 请求过程,包括 DNS 解析、TCP 握手、HTTP 请求和响应等环节
【4月更文挑战第30天】本文介绍了HTTP请求的重要性和详细过程。首先,DNS解析将域名转换为IP地址,通过递归和迭代查询找到目标服务器。接着,TCP三次握手建立连接。然后,客户端发送HTTP请求,服务器处理请求并返回响应。最后,理解这个过程有助于优化网站性能,如使用DNS缓存、HTTP/2、Keep-Alive、CDN和负载均衡等实践建议。
|
5天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
18 0
|
6天前
|
JSON 编解码 Go
Golang深入浅出之-HTTP客户端编程:使用net/http包发起请求
【4月更文挑战第25天】Go语言`net/http`包提供HTTP客户端和服务器功能,简化高性能网络应用开发。本文探讨如何发起HTTP请求,常见问题及解决策略。示例展示GET和POST请求的实现。注意响应体关闭、错误处理、内容类型设置、超时管理和并发控制。最佳实践包括重用`http.Client`,使用`context.Context`,处理JSON以及记录错误日志。通过实践这些技巧,提升HTTP编程技能。
20 1
|
6天前
|
前端开发 API UED
AngularJS的$http服务:深入解析与进行HTTP请求的技术实践
【4月更文挑战第28天】AngularJS的$http服务是核心组件,用于发起HTTP请求与服务器通信。$http服务简化了通信过程,通过深入理解和实践,能构建高效、可靠的前端应用。
|
7天前
|
Go 开发者
Golang深入浅出之-HTTP客户端编程:使用net/http包发起请求
【4月更文挑战第24天】Go语言的`net/http`包在HTTP客户端编程中扮演重要角色,但使用时需注意几个常见问题:1) 检查HTTP状态码以确保请求成功;2) 记得关闭响应体以防止资源泄漏;3) 设置超时限制,避免长时间等待;4) 根据需求处理重定向。理解这些细节能提升HTTP客户端编程的效率和质量。
15 1
|
8天前
|
存储 缓存 开发框架
Flutter的网络请求:使用Dart进行HTTP请求的技术详解
【4月更文挑战第26天】了解Flutter网络请求,本文详述使用Dart进行HTTP请求
|
9天前
|
JSON 数据格式 索引
ES 查看索引的属性的http请求
在 Elasticsearch 中,要查看索引的属性,可以通过发送 HTTP 请求来执行以下操作: 1. **获取索引的映射(Mapping)**: 可以使用 `GET` 请求访问 Elasticsearch 的 `_mapping` 端点来获取特定索引的映射信息。 示例请求: ```http GET http://<elasticsearch_host>:<port>/<index_name>/_mapping ``` 2. **获取索引的设置(Settings)**: 可以使用 `GET` 请求访问 Elasticsearch 的 `_setting