1.ajax、fetch、axios简介1.1．AjaxAjax是最早的发送后端请求的技术，属于原生js。Ajax使用源码，请点击《原生 ajax 请求详解》查看。在一般使用之前，我们需要将它们打包使用，以jQuery的ajax为例。封装的ajax如下：const$={};$.ajax=(obj)=>{varxhr;if(window.XMLHttpRequest){xhr=newXMLHttpRequest();}elseif(window.ActiveXObject){//IEtry{xhr=newActiveXObject('Msxml2.XMLHTTP');}catch(e){try{xhr=newActiveXObject('Microsoft.XMLHTTP');}catch(e){}}}if(xhr){xhr.onreadystatechange=()=>{if(xhr.readyState===4){if(xhr.status===200){obj.success(xhr.responseText);//返回值传递回调}else{//失败回调obj.error('Therewasaproblemwiththerequest.');}}else{console.log('stillnotready...');}};xhr.open(obj.method,obj.url,true);//设置内容-Typetoapplication/x-www-form-urlencoded//以form形式传递数据xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send(util(obj.data));//处理正文数据}//处理数据constutil=(obj)=>{varstr=''for(keyinobj){str+=key+'='+obj[key]+'&'}returnstr.substring(0,str.length-1)}}封装完成。当你开始使用的时候，你会发现body和header处理的有点乱，还有回调地狱的问题，所以我们有了一个新的fetchrequest技术。1.2.fetchfetch首先解决了回调地狱的问题。它返回的结果是一个Promise对象。不熟悉Promise的可以点击《Promise详解》。fetch使用如下：fetch(url,options).then(response=>{//handleHTTPresponse},error=>{//handlenetworkerror})fetch发送网络请求时，可以传输任何数据格式，非常简单的。但是fetch的超时和终止取消不方便。只能通过取消Promise来完成。如果有多个fetch请求，就比较难处理。另外，fetch是一个比较新的技术，对低版本浏览器和IE浏览器的支持不好。1.3.axiosaxios有非常强大的功能，包括取消请求，超时处理，进度处理等等。但是它的本质还是ajax，基于Promise进行封装，既解决了回调地狱的问题，又很好的支持了各种浏览器。axios使用的代码如下：axios.post('/user',{firstName:'Fred',lastName:'Flintstone'}).then(function(response){console.log(response);})。捕获（函数（错误）{console.log（错误）；}）；2.ajax、fetch、axios的优缺点2.1.ajax的优缺点：是js原生的，基于XHR开发的，XHR结构不清晰。对于mvc编程，由于最近vue和React的兴起，不符合mvvm前端开发流程。简单的使用ajax封装，核心是使用XMLHttpRequest对象，如果使用的多且有顺序，很容易造成回调地狱。2.2.fetch优缺点：属于原生js，脱离xhr，号称可以替代ajax技术。基于Promise对象设计，解决回调地狱问题。提供了丰富的API，结构简单易用。默认没有cookie，使用时需要设置。无法检测请求的进度，也无法取消或超时。返回的结果是一个Promise对象。有很多方法可以获得结果。数据类型有相应的方法来获取结果。封装时需要单独处理，容易出错。浏览器支持比较差。2.3.axios的优缺点：在浏览器中创建XMLHttpRequest请求，在node.js中创建http请求。解决回调地狱问题。自动转换为json数据类型。支持Promise技术，提供并发请求接口。可以通过网络请求检测进度。提供超时处理。浏览器兼容性好。使用拦截器，可以统一处理请求和响应。
