本文转载自公众号《读书芯》（ID：AI_Discovery）在使用JavaScript的时候，总会有各种情况需要调用请求。什么技术更适合做ajax调用么？最初，虽然有一些方法可以在不刷新页面的情况下从服务器中提取数据，但它们通常依赖于笨拙的技术。直到Microsoft开发了XMLHttpRequest来替代Outlook电子邮件客户端的浏览器。它在2006年成为Web标准。2015年，FetchAPI随ES6引入。通用请求和响应接口提供一致性，而Promises允许更轻松的链接和异步/等待而无需回调。Fetch简洁、优雅且易于理解，但还有其他不错的选择，本文将简要说明其含义、语法和优缺点。以下代码显示了使用不同替代方法的基本HTTPGET和POST示例。让我们现在开始吧~XMLHttpRequestXMLHttpRequest对象可用于从Web服务器请求数据。它是此比较中最古老的方法，虽然其他选项优于它，但由于其向后兼容性和成熟度，它仍然有效且有用。Get:varreq=newXMLHttpRequest();//Theonreadystatechangeproperty//指定函数//每次执行的状态//oftheXMLHttpRequestchangesreq.onreadystatechange=function(){if(this.readyState==4&&this.status==200){text//TheresponseTextproperty//returns(xhttp.responseText)//Dosomestuff}};req.open("GET","http://dataserver/users",true);req.send();send:varformData=newFormData();formData.append("name","Murdock");varreq=newXMLHttpRequest();req.open("POST","http://dataserver/update");req.send(formData);优点：不需要从外部源加载到后期兼容性成熟/稳定，所有浏览器都可用是原生浏览器API缺点：支持回调地狱笨拙冗长的语法Fetch自然可以替代它支持XmlHttpRequest2的独立数据，如ArrayBuffer、Blob、FormData。get:qwest.get('http://dataserver/data.json').then(function(xhr,response){//...dosomestuffwithdata});send:qwest.post('http://dataserver/update',{firstname:'Murdock',age:30}).then(function(xhr,response){//Makesomeusefulactions}).catch(function(e,xhr,response){//处理错误});优点：可以建立基于Promise的请求限制缺点：XmlHttpRequest2并非在所有浏览器上都可用非本机必须从外部源加载JQuery.ajax这个库不久前被广泛用于发出HTTP异步请求。jQuery的所有Ajax方法都返回XMLHTTPRequest对象的超集：$.ajax({url:'http://dataserver/data.json'}).done(function(data){//...dosomestuffwithdata})。fail(function(){//处理错误});发送：$.ajax({type:"POST",url:'http://dataserver/update',data:data,success:successCallBack,error:errorCallBack,dataType:dataType});优点：支持和文档化的可配置对象在许多项目中使用低学习曲线它返回一个XMLHttpRequest对象，因此请求可以中止axios图源：unsplash基于Promise的HTTP库，用于在浏览器和Nodejs上执行HTTP请求。获取：axios({url:'http://dataserver/data.json',method:'get'})发送：axios.post('http://dataserver/update',{name:'Murdock'}).then(函数(响应){console.log(响应);}).catch(函数(错误){console.log(错误);});优点：使用promises来避免回调地狱在浏览器和Nodejs上都可以工作使用支持上传进度可以设置响应超时请求可以通过简单地传递一个配置对象来配置Axios实现可撤销的promise自动将数据转换为JSON提供灵活性、可读性和低学习曲线。它也可以与Node.js一起使用。获取：request('GET','http://dataserver/data.json').then(成功,失败);.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('结果'+JSON.stringify(res.body));});优点：基于Promise，Node.js和浏览器均可调用request.abort()方法中止请求社区知名库HTTP请求无缝接口，支持重试请求缺点：不支持支持以XMLHttpRequest的形式监控加载进度非原生必须从外部源加载图形源：unsplashHttp-clientHttp-client允许使用JavaScript的fetchAPI编写HTTP客户端。get://usingES6modulesimport{createFetch,base,accept,parse}from'http-client'constfetch=createFetch(base('http://dataserver/data.json'),accept('application/json'),parse('json'))fetch('http://dataserver/data.json').then(response=>{console.log(response.jsonData)})send://usingES6modulesimport{createFetch,method,params}from'http-client'constfetch=createFetch(params({name:'Murdock'}),base('http://dataserver/update'))优点：服务器端工作人员在Node.js和浏览器中工作使用Promise-基于标头保护以提高CORS安全性缺点：非本机Fetch必须从外部源加载Fetch是一种本机浏览器API，用于发出替换XMLHttpRequest的请求。与XMLHttpRequest相比，Fetch使网络请求更容易。FetchAPI使用Promises来避免XMLHttpRequest回调地狱。get://WithES6fetchfetch('http://dataserver/data.json').then(data=>{//...dosomestuffwithdata}).catch(error=>{//Handleerror});send: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));//与ES2017forexample(async()=>{constresponse=awaitfetch('http://dataserver/update',{method:'POST',headers:{'Accept':'application/json','Content-Type':'application/json'},body:JSON.stringify({name='Murdock'})});constresult=awaitresponse.json();console.log(result);})();优点：原生浏览器APIFetch基本完美XMLHttpRequest友好易学兼容最新的浏览器自然替代原生XMLHttpRequest对象学习曲线低无需从外部源加载它使用promises避免回调地狱不再依赖需要分为两步。第一个是发出请求，第二个是对响应调用.json()方法。对于Axios，默认接收JSON响应。从Fetch()返回的Promise仅在网络故障或任何阻止请求完成的情况发生时才会拒绝。即使响应是HTTP404或500，HTTP错误状态也不会被拒绝。缺少其他库的一些有用功能，例如取消请求。默认情况下，Fetch不会从服务器发送或接收cookie，如果站点依赖维护用户会话，这可能会导致未经身份验证的请求。但它可以通过添加启用：{credentials:"same-origin."}图片来源：unsplashFetch是一个新标准，较新版本的Chrome和Firefox支持它而无需使用任何额外的库。此外，Axios、SuperAgent或其他库都有合适的文档，易于使用，学习曲线也不太高。在某些情况下，它们可以提供Fetch不具备的功能。Fetch原生于JavaScript，足以满足项目需求。如果没有特殊需求，我觉得Fetch是最合适的选择。
