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

墨蓝 2023-02-28 08:55 36阅读 0赞

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

> 现在，当您了解所有[最著名的 JavaScript 框架时][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逐步退出历史舞台

[JavaScript]: https://syndicode.com/2018/12/11/58-most-famous-javascript-frameworks-of-various-types/