全文共2678字，预计学习时长15分钟
图源：unsplash
使用JavaScript时，总会有各种需要发出调用请求的情况，进行ajax调用什么技术更适合呢？
最初，尽管有一些方法可以在不刷新页面的情况下从服务器提取数据，但它们通常依赖于笨拙的技术。直到微软为Outlook电子邮件客户端的替代浏览器开发了XMLHttpRequest。它在2006年成为了Web标准。
2015年，Fetch API随ES6引入。通用的Request和Response接口提供了一致性，而Promises允许更容易的链接和没有回调的异步/等待。Fetch简洁，优雅且易于理解，但是还有其他不错的选择，本文将简要的含义、语法以及利弊。
以下代码展示了使用不同替代方法的基本HTTP GET和POST示例。现在开始吧~
XMLHttpRequest
XMLHttpRequest对象可用于从Web服务器请求数据。它是这次比较中最早的方法，尽管其他选择都优于它，但由于其向后兼容性和成熟度，它仍然有效且有用。
得到：
<code>var
req=new
XMLHttpRequest(); req.onreadystatechange =function
() {if
(this
.readyState ==4
&&this
.status ==200
) {console
.log(xhttp.responseText) } };req.open("GET"
,"http://dataserver/users"
,true
); req.send();/<code>
发送：
<code>varformData =new
FormData(); formData.append
("name"
,"Murdock"
);var
req =new
XMLHttpRequest(); req.open("POST"
,"http://dataserver/update"
); req.send(formData);/<code>
优点：
· 不需要从外部源加载
· 向后兼容性
· 成熟/稳定
· 在所有浏览器中均可使用
· 是原生浏览器API
缺点：
· 支持回调地狱
· 笨拙冗长的语法
· Fetch能自然地替代它
图源：unsplash
Qwest
Qwest是一个基于Promise的简单ajax库，它支持XmlHttpRequest2的独立数据，例如ArrayBuffer，Blob和FormData。
得到：
<code>qwest.get('http://dataserver/data.json'
) .then(function
(xhr, response
) { });/<code>
发送：
<code>qwest.post('http://dataserver/update'
,{ firstname:'Murdock'
, age:30
}) .then(function
(xhr, response)
{ }) .catch
(function
(e, xhr, response)
{ });/<code>
优点：
· 可以建立请求限制
· 基于Promise
缺点：
· 并非所有浏览器上都可使用XmlHttpRequest2
· 非原生
· 必须从外部源加载
JQuery.ajax
该库在不久前被广泛用于发出HTTP异步请求。jQuery的所有Ajax方法都返回XMLHTTPRequest对象的超集
得到：
<code>$.ajax({
url
: 'http://dataserver/data.json'
}).done(function
(data
) {
}).fail(function
() {
});/<code>发送：
<code>$.ajax({
type
:"POST",
url
:'http://dataserver/update',
data
:data,
success
:successCallBack,
error
:errorCallBack,
dataType
:dataType
});
/<code>
优点：
· 良好的支持和文档
· 可配置的对象
· 在许多项目中使用
· 学习曲线低
· 它返回XMLHttpRequest对象，因此可以中止请求
缺点：
· 非原生
· 必须从外部源加载
· 没有与Promises结合
· 对于原生ES6 Fetch不是必需的。
Axios
图源：unsplash
基于Promise的HTTP库，用于在浏览器和Nodejs上执行HTTP请求。
得到：
<code>axios
({url
:'http://dataserver/data.json'
, method:'get'
})/<code>
发送：
<code>axios.post('http://dataserver/update'
,{ name:'Murdock'
}) .then
(function
(response)
{ console.log
(response); }) .catch(function
(error)
{ console.log
(error
); });/<code>
优点：
· 使用promise避免回调地狱
· 在浏览器和Nodejs上均可使用
· 支持上传进度
· 可以设置响应超时
· 通过简单地向其传递配置对象即可配置请求
· Axios已实现可撤销的promise提议
· 自动将数据转换为JSON
缺点：
· 非原生
· 必须从外部源加载
SuperAgent
SuperAgent是ajax API，旨在提供灵活性，可读性和较低的学习曲线。它也可以与Node.js一起使用。
得到：
<code>request
('GET'
,'http://dataserver/data.json'
).then
( success, failure);/<code>
.query（）方法接受对象，这些对象与GET方法一起使用时将形成查询字符串。以下代码将产生路径/ dataserver / search？name = Manny＆lastName = Peck＆order = desc。
<code>request
.get
('/dataserver/search'
).query
({name
:'Templeton'
}).query
({lastname
:'Peck'
}).query
({order
:'desc'
}).then
(res => {console
.dir
(res)} });/<code>
发送：
<code>request .post('http://dataserver/update'
) .send({name
:'Murdock'
}) .set('Accept'
,'application/json'
) .then(res
=> {console
.log('result'
+JSON
.stringify(res.body)); });/<code>
优点：
· 基于Promise
· 在Node.js和浏览器中均可使用
· 可以调用request.abort()方法中止请求
· 社区的知名库
· 发出HTTP请求的无缝接口
· 出现故障时支持重试请求
缺点：
· 它不支持以XMLHttpRequest的形式监视加载进度
· 非原生
· 必须从外部源加载
图源：unsplash
Http-client
Http-client允许使用JavaScript的访存API组成HTTP客户端。
得到：
<code>import
{ createFetch, base, accept, parse }from
'http-client'
const
fetch =createFetch( base('http://dataserver/data.json'
), accept('application/json'
), parse('json'
) )fetch('http://dataserver/data.json'
).then(response
=> {console
.log(response.jsonData) })/<code>
发送：
<code>
import { createFetch, method, params
} from
'http-client'
const
fetch =createFetch(
params
({ name: 'Murdock'
}),
base
('http://dataserver/update'
)
)/<code>优点：
· 在Node.js和浏览器中均可使用
· 由服务器端工作人员使用
· 基于Promise
· 提供头部保护装置，以提高CORS的安全性
缺点：
· 必须从外部源加载
· 非原生
Fetch
Fetch是原生浏览器API，用于发出替代XMLHttpRequest的请求。与XMLHttpRequest相比，Fetch使网络请求更容易。Fetch API使用Promises避免XMLHttpRequest回调地狱。
得到：
<code>fetch
('http://dataserver/data.json'
).then
(data => { }).catch
(error => { });/<code>
发送：
<code>fetch('http://dataserver/update'
,{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));const
response = awaitfetch('http://dataserver/update'
, {method
:'POST'
,headers
: {'Accept'
:'application/json'
,'Content-Type'
:'application/json'
},body
:JSON
.stringify({name='Murdock'
}) });const
result = awaitresponse.json();console
.log(result); })();/<code>
优点：
· 是原生浏览器API
· Fetch基本上是经过完善的XMLHttpRequest
· 友好且易于学习
· 与大多数最近使用的浏览器兼容
· 是原生XMLHttpRequest对象的自然替代
· 学习曲线低
· 不需要从外部源加载它
· 使用promises避免回调地狱
· 不需要更多依赖项
缺点：
· 处理JSON数据的过程分为两步。第一个是发出请求，然后第二个是在响应时调用.json（）方法。对于Axios，默认情况下会收到JSON响应。
· 从Fetch()返回的Promise仅在网络故障或任何阻止请求完成的情况发生时拒绝。即使响应为HTTP 404或500，也不会拒绝HTTP错误状态。
· 缺乏其他库的一些有用功能，例如：取消请求。
· 默认情况下，Fetch不会从服务器发送或接收Cookie，如果站点依赖于维持用户会话，则会导致未经身份验证的请求。但是可以通过添加以下内容来启用：
<code>{credentials
: “same-origin.”}/<code>
图源：unsplash
Fetch是一个新标准，新版本的Chrome和Firefox无需使用任何其他库就可支持它。
此外，Axios，SuperAgent或其他库都有适合的文档，易于使用，并且学习曲线不太高。在某些情况下，它们可以提供Fetch不具有的功能。
Fetch在JavaScript里是原生的，足以满足项目需求。如果没有特殊需求，我认为Fetch就是最合适的选择。
留言点赞关注
我们一起分享AI学习与发展的干货
如转载，请后台留言，遵守转载规范
關鍵字: Fetch XMLHttpRequest 原生
