浏览器 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/
本文地址：https://blog.csdn.net/Aria_Miazzy/article/details/107474225
