本文转载自公众号“读芯术”(ID：AI_Discovery)
使用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 changes
- req.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", "http://dataserver/users", true);
- req.send();
发送：
- varformData = new FormData();
- formData.append("name", "Murdock");
- var req = new XMLHttpRequest();
- req.open("POST", "http://dataserver/update");
- req.send(formData);
优点：
- 不需要从外部源加载
- 向后兼容性
- 成熟/稳定
- 在所有浏览器中均可使用
- 是原生浏览器API
缺点：
- 支持回调地狱
- 笨拙冗长的语法
- Fetch能自然地替代它
Qwest
Qwest是一个基于Promise的简单ajax库，它支持XmlHttpRequest2的独立数据，例如ArrayBuffer，Blob和FormData。
得到：
- qwest.get('http://dataserver/data.json')
- .then(function(xhr, response) {
- // ...do some stuff whith data
- });
发送：
- qwest.post('http://dataserver/update',{
- 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: 'http://dataserver/data.json'
- }).done(function(data) {
- // ...do some stuff whith data
- }).fail(function() {
- // Handle error
- });
发送：
- $.ajax({
- type: "POST",
- url: 'http://dataserver/update',
- data: data,
- success: successCallBack,
- error: errorCallBack,
- dataType: dataType
- });
优点：
- 良好的支持和文档
- 可配置的对象
- 在许多项目中使用
- 学习曲线低
- 它返回XMLHttpRequest对象，因此可以中止请求
缺点：
- 非原生
- 必须从外部源加载
- 没有与Promises结合
- 对于原生ES6 Fetch不是必需的。
Axios
基于Promise的HTTP库，用于在浏览器和Nodejs上执行HTTP请求。
得到：
- axios({
- url: 'http://dataserver/data.json',
- method: 'get'
- })
发送：
- axios.post('http://dataserver/update',{
- 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','http://dataserver/data.json').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('http://dataserver/update')
- .send({ name: 'Murdock' })
- .set('Accept', 'application/json')
- .then(res => {
- console.log('result' +JSON.stringify(res.body));
- });
优点：
- 基于Promise
- 在Node.js和浏览器中均可使用
- 可以调用request.abort()方法中止请求
- 社区的知名库
- 发出HTTP请求的无缝接口
- 出现故障时支持重试请求
缺点：
- 它不支持以XMLHttpRequest的形式监视加载进度
- 非原生
- 必须从外部源加载
Http-client
Http-client允许使用JavaScript的访存API组成HTTP客户端。
得到：
- //usingES6 modules
- 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)
- })
发送：
- //usingES6 modules
- import { createFetch, method, params } from 'http-client'const fetch =createFetch(
- params({ name: 'Murdock' }),
- base('http://dataserver/update')
- )
优点：
- 在Node.js和浏览器中均可使用
- 由服务器端工作人员使用
- 基于Promise
- 提供头部保护装置，以提高CORS的安全性
缺点：
- 必须从外部源加载
- 非原生
Fetch
Fetch是原生浏览器API，用于发出替代XMLHttpRequest的请求。与XMLHttpRequest相比，Fetch使网络请求更容易。Fetch API使用Promises避免XMLHttpRequest回调地狱。
得到：
- //WithES6 fetch
- fetch('http://dataserver/data.json')
- .then(data => {
- // ...do some stuff whith data
- }).catch(error => {
- // Handle error
- });
发送：
- 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));//ORwith ES2017 for example(async () => {
- 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);
- })();
优点：
- 是原生浏览器API
- Fetch基本上是经过完善的XMLHttpRequest
- 友好且易于学习
- 与大多数最近使用的浏览器兼容
- 是原生XMLHttpRequest对象的自然替代
- 学习曲线低
- 不需要从外部源加载它
- 使用promises避免回调地狱
- 不需要更多依赖项
缺点：
- 处理JSON数据的过程分为两步。第一个是发出请求，然后第二个是在响应时调用.json()方法。对于Axios，默认情况下会收到JSON响应。
- 从Fetch()返回的Promise仅在网络故障或任何阻止请求完成的情况发生时拒绝。即使响应为HTTP 404或500，也不会拒绝HTTP错误状态。
- 缺乏其他库的一些有用功能，例如：取消请求。
- 默认情况下，Fetch不会从服务器发送或接收Cookie，如果站点依赖于维持用户会话，则会导致未经身份验证的请求。但是可以通过添加以下内容来启用：
- {credentials: “same-origin.”}
Fetch是一个新标准，新版本的Chrome和Firefox无需使用任何其他库就可支持它。
此外，Axios，SuperAgent或其他库都有适合的文档，易于使用，并且学习曲线不太高。在某些情况下，它们可以提供Fetch不具有的功能。
Fetch在JavaScript里是原生的，足以满足项目需求。如果没有特殊需求，我认为Fetch就是最合适的选择。
