全文共2678字，预计学习时长15分钟

图源：unsplash

使用JavaScript时，总会有各种需要发出调用请求的情况，进行ajax调用什么技术更适合呢？

最初，尽管有一些方法可以在不刷新页面的情况下从服务器提取数据，但它们通常依赖于笨拙的技术。直到微软为Outlook电子邮件客户端的替代浏览器开发了XMLHttpRequest。它在2006年成为了Web标准。

2015年，Fetch API随ES6引入。通用的Request和Response接口提供了一致性，而Promises允许更容易的链接和没有回调的异步/等待。Fetch简洁，优雅且易于理解，但是还有其他不错的选择，本文将简要的含义、语法以及利弊。

以下代码展示了使用不同替代方法的基本HTTP GET和POST示例。现在开始吧~

XMLHttpRequest

XMLHttpRequest对象可用于从Web服务器请求数据。它是这次比较中最早的方法，尽管其他选择都优于它，但由于其向后兼容性和成熟度，它仍然有效且有用。

得到：

var req= new XMLHttpRequest();//The onreadystatechange property//specifies a function to be//executed every time the status//of the XMLHttpRequest changesreq.onreadystatechange = function() {    if (this.readyState == 4 &&this.status == 200) {       //The responseText property       //returns a text string                 console.log(xhttp.responseText)       //Do some stuff    }};req.open("GET", ";, true);req.send();

发送：

varformData = new FormData();formData.append("name", "Murdock");var req = new XMLHttpRequest();req.open("POST", ";);req.send(formData);

优点：

· 不需要从外部源加载

· 向后兼容性

· 成熟/稳定

· 在所有浏览器中均可使用

· 是原生浏览器API

缺点：

· 支持回调地狱

· 笨拙冗长的语法

· Fetch能自然地替代它

图源：unsplash

Qwest

Qwest是一个基于Promise的简单ajax库，它支持XmlHttpRequest2的独立数据，例如ArrayBuffer，Blob和FormData。

得到：

qwest.get(';)     .then(function(xhr, response) {        // ...do some stuff whith data     });

发送：

qwest.post(';,{        firstname: 'Murdock',              age: 30     })     .then(function(xhr, response) {        // Make some useful actions     })     .catch(function(e, xhr, response) {        // Process the error     });

优点：

· 可以建立请求限制

· 基于Promise

缺点：

· 并非所有浏览器上都可使用XmlHttpRequest2

· 非原生

· 必须从外部源加载

JQuery.ajax

该库在不久前被广泛用于发出HTTP异步请求。jQuery的所有Ajax方法都返回XMLHTTPRequest对象的超集

得到：

$.ajax({    url: ';  }).done(function(data) {    // ...do some stuff whith data  }).fail(function() {    // Handle error});

发送：

$.ajax({  type: "POST",  url: ';,  data: data,  success: successCallBack,  error: errorCallBack,  dataType: dataType});

优点：

· 良好的支持和文档

· 可配置的对象

· 在许多项目中使用

· 学习曲线低

· 它返回XMLHttpRequest对象，因此可以中止请求

缺点：

· 非原生

· 必须从外部源加载

· 没有与Promises结合

· 对于原生ES6 Fetch不是必需的。

Axios

图源：unsplash

基于Promise的HTTP库，用于在浏览器和Nodejs上执行HTTP请求。

得到：

axios({  url: ';,  method: 'get'})

发送：

axios.post(';,{    name: 'Murdock'  })  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });

优点：

· 使用promise避免回调地狱

· 在浏览器和Nodejs上均可使用

· 支持上传进度

· 可以设置响应超时

· 通过简单地向其传递配置对象即可配置请求

· Axios已实现可撤销的promise提议

· 自动将数据转换为JSON

缺点：

· 非原生

· 必须从外部源加载

SuperAgent

SuperAgent是ajax API，旨在提供灵活性，可读性和较低的学习曲线。它也可以与Node.js一起使用。

得到：

request('GET',';).then(success, failure);

.query（）方法接受对象，这些对象与GET方法一起使用时将形成查询字符串。以下代码将产生路径/ dataserver / search？name = Manny＆lastName = Peck＆order = desc。

request   .get('/dataserver/search')   .query({ name: 'Templeton' })   .query({ lastname: 'Peck' })   .query({ order: 'desc' })   .then(res => {console.dir(res)}});

发送：

request   .post(';)   .send({ name: 'Murdock' })   .set('Accept', 'application/json')   .then(res => {      console.log('result' +JSON.stringify(res.body));   });

优点：

· 基于Promise

· 在Node.js和浏览器中均可使用

· 可以调用request.abort()方法中止请求

· 社区的知名库

· 发出HTTP请求的无缝接口

· 出现故障时支持重试请求

缺点：

· 它不支持以XMLHttpRequest的形式监视加载进度

· 非原生

· 必须从外部源加载

图源：unsplash

Http-client

Http-client允许使用JavaScript的访存API组成HTTP客户端。

得到：

//usingES6 modulesimport { createFetch, base, accept, parse } from 'http-client'const fetch =createFetch( base(';),   accept('application/json'),      parse('json')                     )fetch(';).then(response => {  console.log(response.jsonData)})

发送：

//usingES6 modulesimport { createFetch, method, params } from 'http-client'const fetch =createFetch(  params({ name: 'Murdock' }),  base(';))

优点：

· 在Node.js和浏览器中均可使用

· 由服务器端工作人员使用

· 基于Promise

· 提供头部保护装置，以提高CORS的安全性

缺点：

· 必须从外部源加载

· 非原生

Fetch

Fetch是原生浏览器API，用于发出替代XMLHttpRequest的请求。与XMLHttpRequest相比，Fetch使网络请求更容易。Fetch API使用Promises避免XMLHttpRequest回调地狱。

得到：

//WithES6 fetchfetch(';)  .then(data => {    // ...do some stuff whith data  }).catch(error => {    // Handle error});

发送：

fetch(';,{  method: 'post',  headers: {    'Accept': 'application/json,text/plain, */*',    'Content-Type': 'application/json'  },  body: JSON.stringify({name: 'Murdock'})}).then(res=>res.json())  .then(res => console.log(res));//ORwith ES2017 for example(async () => {   const response = awaitfetch(';, {    method: 'POST',    headers: {      'Accept': 'application/json',      'Content-Type': 'application/json'    },    body:JSON.stringify({name='Murdock'})  });const result = awaitresponse.json();console.log(result);})();

优点：

· 是原生浏览器API

· Fetch基本上是经过完善的XMLHttpRequest

· 友好且易于学习

· 与大多数最近使用的浏览器兼容

· 是原生XMLHttpRequest对象的自然替代

· 学习曲线低

· 不需要从外部源加载它

· 使用promises避免回调地狱

· 不需要更多依赖项

缺点：

· 处理JSON数据的过程分为两步。第一个是发出请求，然后第二个是在响应时调用.json（）方法。对于Axios，默认情况下会收到JSON响应。

· 从Fetch()返回的Promise仅在网络故障或任何阻止请求完成的情况发生时拒绝。即使响应为HTTP 404或500，也不会拒绝HTTP错误状态。

· 缺乏其他库的一些有用功能，例如：取消请求。

· 默认情况下，Fetch不会从服务器发送或接收Cookie，如果站点依赖于维持用户会话，则会导致未经身份验证的请求。但是可以通过添加以下内容来启用：

{credentials: “same-origin.”}

图源：unsplash

Fetch是一个新标准，新版本的Chrome和Firefox无需使用任何其他库就可支持它。

此外，Axios，SuperAgent或其他库都有适合的文档，易于使用，并且学习曲线不太高。在某些情况下，它们可以提供Fetch不具有的功能。

Fetch在JavaScript里是原生的，足以满足项目需求。如果没有特殊需求，我认为Fetch就是最合适的选择。

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范