ajax缺点和优点-vue解决跨域问题

一般来说，大家必须在应用他们以前封裝他们，就以jQuery的ajax为例子。

封装ajax如下所示:

const $ = {};$.ajax = (obj)=>{ var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } } if (xhr) { xhr.onreadystatechange = () =>{ if (xhr.readyState === 4) { if (xhr.status === 200) { obj.success(xhr.responseText); //传参传callback } else { //failcallback obj.error('There was a problem with the request.'); } } else { console.log('still not ready...'); } }; xhr.open(obj.method, obj.url, true); // 设定 Content-Type 为 application/x-www-form-urlencoded // 以表格的方式传递数据 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(util(obj.data));//解决body数据信息 } //解决数据信息 const util = (obj)=>{ var str = '' for (key in obj){ str = key '=' obj[key] '&' } return str.substring(0,str.length-1) } }

当包进行而且你进行应用它的情况下，你能发觉行为主体和头顶部解决的有点儿乱，还有一个回调函数到炼狱，因此大家拥有一个新的fetch request技术性。

1.2.获取

Fetch最先解决了招唤回炼狱的难题，他回到的結果是一个Promise目标。如果不了解承诺，能够点一下“承诺详细说明”。

获取的应用方法如下所示:

fetch(url,options).then(response=>{// handle HTTP response},error=>{// handle network error})

fetch推送数据网络要求时，能够传送一切数据类型，比较简单。可是撤销获得的请求超时和停止不方便，只有根据撤销Promise来进行。如果有好几个获取要求，解决他们会更为艰难。此外fetch是较为新的技术性，对低版电脑浏览器和IE网页的适用也不太好。要认识更多的有关获取的信息内容，请点一下。

1.3.axios

Axios十分强劲，包含撤销要求.请求超时解决.进展解决这些。但其实质是根据Promise封裝的ajax，不但解决了回调地狱难题，并且有效地适用了各种各样电脑浏览器。

Axios的应用编码如下所示:

axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone'}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});

要认识一些相关axios的信息内容，请点一下。

第二，ajax.fetch和axios的优点和缺点。

2.1.ajax的优势与劣势:

属 js 原生态，根据XHR开展开发设计，XHR 构造不清楚。对于 mvc 程序编写，因为近期vue和React的盛行，不符mvvm前端工程师步骤。单纯性应用 ajax 封裝，关键是应用 XMLHttpRequest 目标,应用较多并有顺序得话，非常容易造成回调地狱。

2.2.获取的优势与劣势:

归属于原生态 js，摆脱了xhr ,称为能够取代 ajax技术。根据 Promise 目标设计方案的，能够处理回调地狱难题。给予了充足的 API，应用构造简易。默认设置没有cookie，应用时必须设定。没有办法检验要求的进展，没法撤销或请求超时解决。回到結果是 Promise 目标，获得結果有多种多样方式，基本数据类型有相应的收集方式，封裝时必须各自解决，易错误。电脑浏览器整合性较为差。

2.3 axios的优点和缺点:

在网页中建立XMLHttpRequest要求，在node.js中建立http要求。处理回调地狱难题。全自动转换为json基本数据类型。适用Promise技术性，给予高并发要求插口。能够利用互联网要求检验进展。给予请求超时解决。电脑浏览器兼容模式优良。有回调函数，能够对要求和回应统一解决。