浏览器的JavaScript HTTP库的比较

现代网络开发在很大程度上取决于Ajax请求。尽管本机XMLHttpRequest对象提供了此功能，但许多开发人员更喜欢使用诸如jQuery之类的库来简单地处理。 本文比较了两个流行的替代方案：Superagent和Axios，通过对示例HTTP服务的请求展示了它们的功能。

密钥差异：

超级代理和Axios都提供异步的AJAX功能，允许其他代码同时执行。

> axios承诺，与标准的JavaScript实践保持一致，而Superagent使用了不同的方法。这使Axios更加与其他基于承诺的库无缝集成。> >两者都非常适合基本获取，发布和提出对API的请求，但缺少在Modern 中找到的上传进度监视之类的功能。
• >。
>在功能上相似，但作者发现Superagent的API更直观。 但是，如果承诺集成至关重要，则Axios是首选的选择。 对于舒适地管理浏览器兼容性或仅针对现代浏览器的开发人员来说，
• 仍然是一个可行的选择。XMLHttpRequest
• XMLHttpRequest库简介：

支持同步和异步请求。 由于JavaScript是单线读取的，因此同步请求会阻止执行，从而使异步请求成为实际选择。 Axios和Superegent都独家执行异步请求。 由于请求发生在后台，因此响应没有立即可用。 收到响应后，回调功能会处理。 Axios使用承诺来管理此过程，从而提供更好的集成与其他异步代码。超级代理的API不遵守标准的承诺模式。 在使用多个库或自定义承诺时，Axios成为更强大的选择。 但是，超级代理具有更广泛的识别和一个小而有用的插件生态系统（例如，用于URL前缀）。>

>两个库在基本API互动（获取，发布，put）上都表现出色，但缺乏现代

中可用的上传进度跟踪之类的高级功能。 它们的主要好处在于他们的简洁，可链式的API，用于请求配置和执行。XMLHttpRequest>

>安装：

XMLHttpRequest>

>不需要安装；它内置在现代浏览器（IE8及以后）中。 SuperEment是一个NPM模块，需要NPM（包括Node.js/io.js）和诸如浏览器之类的客户端包装工具。 Axios可作为NPM模块，AMD模块和独立的JavaScript文件。

>示例API（面包店订单管理）：>

此示例使用假设的面包店订单管理API：>

• get /orders?start=YYYY-MM-DD&end=YYYY-MM-DD：在日期范围内检索订单。
• post/orders：创建一个新的订单。>

数据以JSON格式交换。 例如，要在3月10日（5月4日下达订单）订购3块巧克力和5个柠檬蛋糕：

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

创建一个新订单：>

这需要指定http方法（post），url（

），请求正文（订单详细信息）和内容类型（/orders）。application/json>

• 超级代理：

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);
    }
  });

登录后复制

xmlhttpRequest：

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!');
  });

• 按日期范围检索订单
这涉及添加查询参数（

和

var xhr = new XMLHttpRequest();
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(JSON.stringify({chocolate: 2, placed: '2015-04-26'}));

）。

>

超级代理：

start end

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

xmlhttpRequest：

• >建议和结论：
仍然是有效的选择。 选择取决于项目需求和开发人员的偏好。 GitHub存储库（输入中未提供的链接）可能包含完整的代码示例。 输入文本的其余部分由经常询问的问题和答案组成，这些问题和答案不包含在此输出中。

>

以上是浏览器的JavaScript HTTP库的比较的详细内容。更多信息请关注PHP中文网其他相关文章！