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

末蓝、 2023-02-28 08:54 10阅读 0赞

# 浏览器 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的入门教程，你可以阅读[本教程][Link 1]。

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

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

### 如何安装库 ###

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

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

### 示例 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()`

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

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。然后，我们将响应回调附加到处理程序并调用以发送请求。使用示例如下所示：`XMLHttpRequest``open()``onload``send`

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

# #

### 基于日期范围检索订单 ###

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

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都小心地为你转义查询参数。`&``=``?`

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

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存储库][GitHub]。

*翻译来源：[https://www.sitepoint.com/comparison-javascript-http-libraries/][https_www.sitepoint.com_comparison-javascript-http-libraries]*

[Link 1]: http://www.sitepoint.com/overview-javascript-promises/
[SuperAgent]: https://github.com/johntron/superagent-prefix
[npm]: http://www.npmjs.com/
[Link 2]: https://github.com/componentjs/component
[Node.js]: https://node.js.org/
[io.js]: https://iojs.org/
[Link 3]: http://browserify.org/
[Link 4]: http://www.sitepoint.com/getting-started-browserify/
[Link 5]: https://github.com/mzabriskie/axios
[GitHub]: https://github.com/sitepoint-editors/http-browser-comparison
[https_www.sitepoint.com_comparison-javascript-http-libraries]: https://www.sitepoint.com/comparison-javascript-http-libraries/