JavaScriptfetchinterface如果你看网上的fetch教程，你会先比较XMLHttpRequest和fetch的优缺点，然后引出一堆看完很快就忘记的内容（我记性不好）。因此，为了自己的方便，我写了一篇关于fetch的文章。毕竟，我只是在工作中使用一些基本点。fetch，说白了，就是XMLHttpRequest的替代品。如果有人问你，除了Ajax获取后台数据，还有别的办法吗？这是你可以回答的。除了通过XMLHttpRequest对象获取后台数据，还可以使用更好的方案fetch。fetch的案例下面写第一个fetch获取后端数据的例子：//通过fetch获取百度的错误提示页面fetch('https://www.baidu.com/search/error.html')//返回aPromiseobject.then((res)=>{returnres.text()//res.text()是一个Promise对象}).then((res)=>{console.log(res)//resIt就是最终的结果})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请求类似于GET请求，规范POST请求也是在fetch的第二个参数中：//通过fetch获取百度的错误提示页面fetch('https://www.baidu.com/search/error.html',{method:'POST'//指定POST请求}).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)})在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('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，可以解析intoJSON}).then((res)=>{console.log(res)//FetchJSONdata})Mandatorywithcookies一个Usersession，会导致一个unauthenticatedrequest（发送cookies，必须发送credentialheader）//通过fetchfetch('https://www.baidu.com/search/error.HTML',{method:'GET',credentials:'include'//必须添加凭据标头}).then((res)=>{returnres.text()}).then((res)=>{console.日志（资源）}）
