fetch和XMLHttpRequest如果你看了网上的fetch教程，你会先比较XMLHttpRequest和fetch的优缺点，然后引出一堆看完很快就会忘记的内容（我记性不好）。因此，为了自己的方便，我写了一篇关于fetch的文章。毕竟，我只是在工作中使用一些基本点。fetch，说白了，就是XMLHttpRequest的替代品。如果有人问你，除了Ajax获取后台数据，还有别的办法吗？这是你可以回答的。除了通过XMLHttpRequest对象获取后台数据，还可以使用更好的方案fetch。如何获取fetch到目前为止，fetch支持不是很好，但是GoogleChrome已经支持fetch。fetch挂在BOM中，可以直接在GoogleChrome中使用。查看fetch的支持情况：fetch的支持情况当然不支持fetch也没有问题。可以使用第三方的polyfill来实现onlyfetch:whatwg-fetchhelloworldoffetch下面写第一个fetch获取后端数据示例：//通过fetch获取百度的错误信息页面fetch('https://www.baidu.com/search/error.html')//返回一个Promise对象。then((res)=>{returnres.text()//res.text()是一个Promise对象}).then((res)=>{console.log(res)//res是最终结果})是不是很简单？可能比较难的是Promise的写法，可以参考阮一峰老师的ES6教程。说明一下，下面演示的GET请求或POST请求使用了百度查询的一些接口。有些可能传入的参数不会被本接口解析，但不影响本接口的使用。GET请求GET请求已经初步完成了helloworld。这时候就该了解GET请求是如何处理的了。在上面的helloworld中，使用了第一个参数。其实fetch还可以提供第二个参数，用来传递一些初始化信息。如果要特别指明是GET请求，必须写成如下形式：//通过fetch获取百度的错误提示页面fetch('https://www.baidu.com/search/error.html',{method:'GET'}).then((res)=>{returnres.text()}).then((res)=>{console.log(res)})GET请求的参数为在GET请求中传入如果需要传递参数怎么办？此时只能在URL上传递参数。//通过fetch获取百度的错误提示页面fetch('https://www.baidu.com/search/error.html?a=1&b=2',{//写入url方法中传入的参数:'GET'}).then((res)=>{returnres.text()}).then((res)=>{console.log(res)})POST请求POST请求最初类似于GET请求，POST请求的fetch的第二个参数中也有说明：//通过fetch获取百度的错误提示页面fetch('https://www.baidu.com/search/error.html',{method:'POST'//指定的是aPOSTrequest}).then((res)=>{returnres.text()}).then((res)=>{console.log(res)})POST请求参数的传递是众所周知的，POST请求参数一定不能放在URL中，这样做的目的是为了防止信息泄露。//通过fetch获取百度错误提示页面fetch('https://www.baidu.com/search/error.html',{method:'POST',body:newURLSearchParams([["foo",1],["bar",2]]).toString()//这里是请求对象}).then((res)=>{returnres.text()}).then((res)=>{console.log(res)})其实除了URLSearchParams这个对象之外，还有其他几个对象，大家可以参考：几个常用的对象来学习和使用。设置请求的头部信息，通常是POST提交过程中的表单提交。但是查询后发现默认的提交方式是：Content-Type:text/plain；charset=UTF-8，这显然不合理。下面学习指定header信息：//通过fetch获取百度的错误提示页面fetch('https://www.baidu.com/search/error.html',{method:'POST',headers:newHeaders({'Content-Type':'application/x-www-form-urlencoded'//指定提交方式为表单提交}),body:newURLSearchParams([["foo",1],["bar",2]]).toString()}).then((res)=>{returnres.text()}).then((res)=>{console.log(res)})这时候在GoogleChromeQuery在Network中，你会发现请求方式变成了content-type:application/x-www-form-urlencoded。通过接口获取JSON数据上面的例子都是返回的是文本，那么除了文本还有其他数据类型吗？必须有，具体查询地址：Bodytype由于JSON数据是最常用的，下面简单演示如何获取JSON数据：//通过fetch获取百度的错误提示页面fetch('https://www.baidu.com/rec?platform=wise&ms=1&rset=rcmd&word=123&qid=11327900426705455986&rq=123&from=844b&baiduid=A1D0B88941B30028C375C79CE5AC2E5E%3AFG%3D1&tn=&clientWidth=375&t=1506826017369&r=8255',{//在URL中写上传递的参数method:'GET',headers:newHeaders({'Accept':'application/json'//通过header指定，获取的数据类型为JSON})}).then((res)=>{returnres.json()//返回一个Promise，可以解析成JSON}).then((res)=>{console.log(res)//获取JSON数据})强制使用Cookie默认fetch不会发送或发送自服务器接收任何cookies，如果站点依赖于维护一个用户session，会导致一个未经认证的请求（发送cookies，你必须发送一个credentialheader）。//通过fetch获取百度的错误提示页面fetch('https://万维网。baidu.com/search/error.html',{method:'GET',credentials:'include'//必须添加凭据标头}).then((res)=>{returnres.text()}).then((res)=>{console.log(res)})简单封装最后的fetch，引入很多内容，你注意到GET和POST中传递参数的方式不一样了吗？下面封装一个简单的fetch来实现GET请求和POST请求参数的统一/***将对象转换成a=1&b=2的形式*@paramobjobject*/functionobj2String(obj,arr=[],idx=0){for(letiteminobj){arr[idx++]=[item,obj[item]]}returnnewURLSearchParams(arr).toString()}/***真实请求*@paramurl请求地址*@paramoptions请求参数*@parammethod请求方法*/functioncommonFetcdh(url,options,method='GET'){constsearchStr=obj2String(options)letinitObj={}if(method==='GET'){//如果是GET请求，拼接urlurl+='?'+searchStrinitObj={method:method,credentials:'include'}}else{initObj={method:method,credentials:'include',headers:newHeaders({'Accept':'application/json','Content-}输入':'application/x-www-form-urlencoded'}),body:searchStr}}fetch(url,initObj).then((res)=>{returnres.json()}).then((res)=>{returnres})}/***GET请求*@paramurl请求地址*@paramoptions请求参数*/functionGET(url,options){returncommonFetcdh(url,options,'GET')}/***POST请求*@paramurl请求地址*@paramoptions请求参数*/functionPOST(url,options){returncommonFetcdh(url,options,'POST')}GET('https://www.baidu.com/search/error.html',{a:1,b:2})POST('https://www.baidu.com/search/error.html',{a:1,b:2})
