Http Ajax技术哪家强？Axios、Superagent、Request、Fetch、Supertest技能大比拼！

Http Ajax技术哪家强？Axios、Superagent、Request、Fetch、Supertest技能大比拼！

 

现在，当您了解所有最著名的 JavaScript 框架时，是时候介绍 2020 年最好的 JS HTTP 请求库了。

准备好了吗？一起来探索和使用！

 

先来个简单介绍

我们将研究 几个最流行的 HTTP 库，并了解它们如何实现相同的目标：

• superagent 这是一个基于承诺的轻量级渐进式 AJAX API，非常适合发送 HTTP 请求和接收服务器响应。与轴像一样，它同时在节点和所有现代浏览器中工作。

• axios. 这是一个基于承诺的 HTTP 库，用于在 Nodejs 和浏览器上执行 HTTP 请求。它支持所有现代浏览器，甚至包含对 IE8 + 的支持。

• request. 这提供了一种更简化的 HTTP 请求方法。使用"请求"，您将意识到与其他 HTTP 库一起发出 HTTP 请求所需的代码更少。

• fetch. 这是用于发出请求的本机浏览器 API。它旨在成为 XMLHttpRequest 的替代方案。

• supertest. 这用于测试 Node.js HTTP 服务器。此库由 SuperAgent 提供支持，它结合了自己的 API 和 SuperAgent 提供的较低级别的 API，为测试 HTTP 提供了整洁的界面。

• 原生XHR. 所有浏览器支持，但编写代码多，如果直接写Http库的轮子，建议使用。

• $.ajax. Jquery的ajax请求，Jquery时代的HTTP利器。

 

 

技能大比拼

 

Superagent

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

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

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

优点

• 它有一个插件生态，通过构建插件可以实现更多功能

• 可配置

• HTTP 请求发送接口友好

• 可以为请求链式添加方法

• 适用于浏览器和 Node

• 支持显示上传和下载进度

• 支持分块传输编码

• 支持旧风格的回调

• 繁荣的插件生态，支持众多常见功能

缺点

• 没得什么缺点，听说有人嫌弃其对Fetch API的标准规范的支持不够友好(真想这么用，自己封装一个就行)

 

Axios

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

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

优点

• 同时支持 Node.js 和浏览器

• 支持 Promise API

• 可以配置或取消请求

• 可以设置响应超时

• 支持防止跨站点请求伪造（XSRF）攻击

• 可以拦截未执行的请求或响应

• 支持显示上传进度

• 广泛用于 React 和 Vue 项目

缺点

• 用起来比较麻烦

 

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 等不同的测试套件混用

缺点

• 不支持浏览器

 

原生AJAX

// 1. 创建连接
var xhr = null;

xhr = new XMLHttpRequest()

// 2. 连接服务器
xhr.open('get', url, true)

// 3. 发送请求
xhr.send(null);

// 4. 接受请求
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            success(xhr.responseText);
        } else { // fail
            fail && fail(xhr.status);
        }
    }
}

优点：

• 通过异步模式，提升了用户体验. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.
• Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
• Ajax可以实现动态不刷新（局部刷新）

缺点：

• 安全问题 AJAX暴露了与服务器交互的细节。
• 对搜索引擎的支持比较弱。
• 不容易调试。

 

$.ajax

jQuery对Ajax的封装

$.ajax({
    dataType: 'json', // 设置返回值类型
    contentType: 'application/json', // 设置参数类型
    headers: {'Content-Type','application/json'},// 设置请求头
    xhrFields: { withCredentials: true }, // 跨域携带cookie
    data: JSON.stringify({a: [{b:1, a:1}]}), // 传递参数
    error:function(xhr,status){ // 错误处理
    console.log(xhr,status);
},
success: function (data,status) { // 获取结果
    console.log(data,status);
}
})

优点：

• $.ajax只接收一个参数，这个参数接收一系列配置

缺点：

• 前端工程化的发展，可能伴随着jquery逐步退出历史舞台