Ajax简介Ajax是提供对HTTP协议的完整访问的XMLHttpRequest对象。在早期的项目中，我们只能通过它向服务端请求数据，包括Jquery封装的Ajax请求库。让我们看一下XMLHttpRequest对象。做一个Ajax请求的例子//通过XMLHttpRequest初始化一个Ajax请求实例constxhr=newXMLHttpRequest();//设置超时时间，0代表永不超时xhr.timeout=0;//初始化请求，这个方法会not向服务器发送请求//第一个参数为请求方法，如GET、POST//第二个参数为服务器请求的url//第三个参数为请求是否异步，默认为true异步xhr。open('POST','/api/url',true);//请求传输的数据constformData=newFormData();formData.append("username","XXX");formData.append("age",18);//请求发起xhr.send(formData);//监听请求结果//获取服务器返回的数据xhr.onreadystatechange=function(){//当readyState为4且xhr.statusis200//获取正常返回的数据if(xhr.readyState==4&&xhr.status==200){alert(xhr.responseText);}else{//服务器返回异常数据alert(xhr.statusText);}};从上面的例子我们可以看出，如果我们要请求数据，需要先新建一个XMLHttpRequest实例，然后通过监听该函数获取服务器返回的数据。Fetch简介Fetch是window对象提供的一种方法。为实现基于promise的http请求，它似乎取代了最早由XMLHttpRequest实现的ajax请求。同样，我们先来看一个Fetch请求的例子//请求数据constdata={username:"xxx",age:18,};//第一个参数是请求的url//第二个参数是一个对象//可以设置请求方法，请求数据，请求超时//和请求头fetch("/api/url",{//请求方法method:"POST",//请求数据通过body传递body:JSON.stringify(data),}).then((response)=>{//正常服务返回的数据为通过then获取到console.log(response);}).catch((error)=>{//在catch中处理异常返回console.log(error);});从上面的例子可以看出，我们想要请求数据，直接使用fetch这样的全局对象，然后使用Promise获取服务器返回的数据即可。通过Promise返回数据还是老规矩。下面用一个例子来看看axios是如何请求数据的//首先通过npm安装axiosnpmi-Saxios//通过importaxiosfrom'axios'将axios引入到项目中//我们可以看到参数是一个对象//在您可以在其中设置请求方法、请求数据//和请求标头axios({method:"POST",url:"/api/url",data:{username:"xxx",age:18,},}).then((response)=>{//正常服务返回的数据从console.log(response);}).catch((error)=>{//异常返回在catch控制台处理。日志（错误）；}）；从上面的例子我们可以看出，如果我们要请求数据的话，用法和Fetch基本一样，但是它的底层确实是基于XMLHttpRequest的成熟的ajax请求库，帮助我们封装了很多发送服务的实用方法服务器请求数据。在开发中，这是常用的服务端数据请求结束。
