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

目录
相关文章
|
10月前
|
JavaScript 前端开发 Java
通义灵码 Rules 库合集来了,覆盖Java、TypeScript、Python、Go、JavaScript 等
通义灵码新上的外挂 Project Rules 获得了开发者的一致好评:最小成本适配我的开发风格、相当把团队经验沉淀下来,是个很好功能……
1635 103
|
5月前
|
JavaScript 前端开发 开发者
Nest.js控制器深度解析:路由与请求处理的高级特性
以上就是对 NestJS 控制层高级特性深度解析:从基本概念到异步支持再到更复杂场景下拦截其与管道等功能性组件运用都有所涉及,希望能够帮助开发者更好地理解和运用 NestJS 进行高效开发工作。
409 15
|
8月前
|
JavaScript 前端开发 API
Node.js中发起HTTP请求的五种方式
以上五种方式,尽管只是冰山一角,但已经足以让编写Node.js HTTP请求的你,在连接世界的舞台上演奏出华丽的乐章。从原生的 `http`到现代的 `fetch`,每种方式都有独特的风格和表现力,让你的代码随着项目的节奏自由地舞动。
771 65
|
10月前
|
JavaScript 前端开发 API
|
9月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
564 24
|
9月前
|
JSON 安全 网络协议
HTTP/HTTPS协议(请求响应模型、状态码)
本文简要介绍了HTTP与HTTPS协议的基础知识。HTTP是一种无状态的超文本传输协议,基于TCP/IP,常用80端口,通过请求-响应模型实现客户端与服务器间的通信;HTTPS为HTTP的安全版本,基于SSL/TLS加密技术,使用443端口,确保数据传输的安全性。文中还详细描述了HTTP请求方法(如GET、POST)、请求与响应头字段、状态码分类及意义,并对比了两者在请求-响应模型中的安全性差异。
888 20
|
JavaScript 前端开发
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
564 156
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
548 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
11月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
移动开发 JavaScript 前端开发
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
427 58