浏览器 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"
}

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

 

创建新订单

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

1. 请求方法（POST）
2. 请求 URL （/orders)
3. 请求正文（我们的订单详情为 JSON 格式）
4. 请求正文内容类型 （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