浏览器 JavaScript HTTP 库的大比拼：SugerAgent VS Axios

Ajax 请求在现代网站中大量使用。除了使用执行Ajax请求的内置方法(XMLHttpRequest)外，许多开发人员使用jQuery的方法来执行相同的任务。在这篇文章中，我们将介绍两个允许您实现相同目标的备选库。SuperAgent 和 Axios。为了比较它们，我们将对虚拟 HTTP 服务执行一些请求。

简介

Request请求实例可以执行同步或异步请求。JavaScript 是单线程的，因此同步请求会阻止要执行的其他操作。因此，我们实际上从来不使用它们。本文中介绍的库，axios 和superagent，始终执行异步请求。由于您的代码在浏览器在后台执行请求时继续运行，因此无法马上获取响应。您必须提供一个函数来调用服务器响应准备就绪时，通常称为回调，它将处理响应。

为了处理这个过程，Axios返回一个Promise。相反，SuperAgent的 API 不符合任何标准。因此，就这个功能，我们可以说，Axios比SuperAgent更好。优点是，您可以将 axios 返回的Promise与其他库的承诺或使用内置 JavaScript 对象创建的承诺相结合。如果你需要一个Promise的入门教程，你可以阅读本教程。

另一方面，SuperAgent更广为人知，并且围绕它有一个小的插件生态系统（例如，SuperAgent 前缀，以添加一个前缀到所有 URL）。

当您希望使用基本 POST/PUT/GET 功能与 API 通信时，Axios 和SuperAgent是最合适的。例如，它们不支持像在现代浏览器中那样监视上传进度。它们的主要优点是，只需链接几个函数调用，就可以配置和发送请求。

如何安装库

XMLHttpRequest无需安装。所有现代浏览器，从IE浏览器8开始实现。SuperAgent作为npm模块和组件模块进行分发。要使用 npm 安装SuperAgent，您需要先安装它。npm 附带标准Node.js或io.js安装程序，因此，如果您已经安装了 Node.js/io.js，您应该可以自行操作，或者应该安装您喜欢的其中任何一个。接下来，您需要使用客户端打包解决方案（如浏览器化）在文件中包含。如果您没有任何经验，SitePoint 已经发布了一个教程，其中讨论了浏览器化的功能。

axios 作为 npm 模块、AMD 模块和导出全局对象的普通 JavaScript 文件进行分发。你可以从轴希希布存储库下载他们全部。

示例 API

我们的示例 API 是面包店的订单管理服务。客户端可以通过执行 GET 请求按日期搜索订单，如下所示：

/orders?start=2015-03-23&end=2015-03-24

客户端还可以通过执行 POST 请求创建新订单：

/orders

服务器在 GET 请求时返回的数据以及网站为创建新订单而发送的数据使用 JSON 格式提供。例如，如果当前日期为 5 月 4 日，并且客户需要在 3 月 10 日交付 3 个巧克力蛋糕和 5 个柠檬蛋糕，您可以发送如下 JSON 对象：

{"chocolate": "3","lemon": "5","delivery": "2015-03-10","placed": "2015-03-04"
}

我们的目标是创建一个新订单，并检索在特定日期范围内下订单。

创建新订单

要创建订单，我们需要指定：

请求方法（POST）
请求 URL （/orders)
请求正文（我们的订单详情为 JSON 格式）
请求正文内容类型（application/json)

指定正文内容类型是一种好的做法：服务器可以从请求标头中确定如何分析正文。

我们为每个配置参数配置具有专用方法的SuperAgent请求，然后调用发送请求。函数将回调作为处理响应的参数。如果第一个回调参数为真，则发生错误。让我们看一个例子：end()end()

var request = require('superagent');request.post('/orders/').send({'chocolate': 2, 'placed': '2015-04-26'}).type('application/json').accept('json').end(function(err, res) {if (err) {console.log('Error!');} else {console.log(res.body);}});

axios 将 URL 作为第一个参数，将请求正文作为第二个参数，将所有剩余配置作为第三个参数。若要处理响应，可以指定两个回调：一个用于成功案例（我将把它传递给）另一个用于错误案例（我将把它传递给）。使用示例如下所示：thencatch

axios.post('/orders/',{chocolate: 2,placed: '2015-04-26'},{headers:{'Content-type': 'application/json','Accept': 'application/json'}}
).then(function(response) {console.log(response.data);}).catch(function(response) {console.log('Error!)});

为了使用实现相同的目标，我们在函数中配置 HTTP 方法和 URL。然后，我们将响应回调附加到处理程序并调用以发送请求。使用示例如下所示：XMLHttpRequestopen()onloadsend

var xhr = new XMLHttpRequest();// The last parameter must be set to true to make an asynchronous request
xhr.open('POST', '/orders/', true);xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json');
xhr.onload = function() {if (xhr.status >= 200 && xhr.status < 300) {console.log(xhr.response);} else {console.log('Error !');}
};
xhr.send();

浏览器将响应数据附加到对象本身。要知道是否发生了错误，我们必须分析响应状态，并按我们喜欢的方式对其进行管理。在这种情况下，我记录在成功状态（从 200 到 299）时返回的响应;字符串，否则。XMLHttpRequest'Error !'

基于日期范围检索订单

要检索在日期范围内下订单，我们将设置一个和查询参数。SuperAgent函数采用包含查询参数及其值的对象：startendquery()

request.get('/orders').query({start: '2015-04-22', end: '2015-04-29'}).accept('json').end(function(err, res) {if (err) {/* Handle error */}  else {/* Handle response */}
});

axios 使用配置对象中的键：params

axios.get('/orders',{headers: {'Accept': 'application/json'},params: {start: '2015-04-22',end: '2015-04-29'}}
);

查询字符串不应包含某些字符，特别是和。Axios和SuperAgent都小心地为你转义查询参数。&=?

使用，您需要使用查询字符串的键值对上的内置函数手动转义组件。下面你可以找到一个示例，说明如何做到这一点，即使对于这个特定情况来说，这是多余的：XMLHttpRequestencodeURIComponent()

var xhr = new XMLHttpRequest();
xhr.open('GET', '/orders?start=' +encodeURIComponent('2015-04-22') + '&end=' +encodeURIComponent('2015-04-29'), true);

建议

虽然Axios使用Promise，但代码看起来几乎与SuperAgent相同。使用SuperAgent，您可以使用专用方法设置内容类型，但使用 axios 时，您需要小心避免标题名称中的拼写错误。

SuperAgent和Axios根据内容类型自动对请求体进行去计算。可以通过在实例上设置属性来实现相同的目标。它们还将所有非 200 响应作为错误处理，同时通过允许您管理状态代码，然后采取相应操作来提供更大的灵活性。

SuperAgent和Axios在服务器上也起作用。然而，在我看来，SuperAgent有最令人愉快的API。但是，如果你想要Promise，Axios是你最好的选择。

最后一点，如果你可以自己处理浏览器差异或只是针对现代浏览器，是Fetch。

好吧，其实superagent也是支持Promise的，而且使用async await，用起来爽的很。个人更喜欢superagent。

结论

在这篇文章中，我们了解如何使用原始、简单的 REST API 通信。这三种解决方案提供等效功能，但具有它们自身的特点。如果您使用现代浏览器，可以依赖。并且是方便的，如果您希望避免处理旧版本的 Internet 资源管理器，并在服务器上使用相同的 API。

如果你想玩本文中显示的代码，你可以访问我创建的GitHub存储库。

翻译来源：https://www.sitepoint.com/comparison-javascript-http-libraries/