1.什么是fetch()？fetch()是浏览器内置的全局JavaScript方法，用于发送http请求。无需下载安装即可直接使用。//一个简单的http请求fetch('http://example.com/movies.json').then(function(response){returnresponse.json();}).then(function(myJson){console.log(myJson);});二、如何使用？1、简单使用示例fetch()的第二个参数是init对象，用于设置http的配置信息。postData('http://example.com/answer',{answer:42}).then(data=>console.log(data)).catch(error=>console.error(error))函数postData(url,data){returnfetch(url,{body:JSON.stringify(data),cache:'no-cache',credentials:'same-origin',headers:{'user-agent':'Mozilla/4.0MDN示例','content-type':'application/json'},方法:'POST',模式:'cors',重定向:'follow',referrer:'no-referrer',}).then(response=>response.json())}2。Configurationdetailsmethod：请求使用的方法，如GET、POST、PUT、DELETE等。headers：请求的头部信息。body:请求的body信息，注意GET或HEAD方法的请求不能包含body信息。mode:请求模式，可选值：cors,no-cors,same-origincredentials:是否向服务端发送cookie：omit（无论如何都不发送），same-origin（只从同源发送），include（发送在任何情况下）缓存：可用的缓存模式：默认、无存储、重新加载、无缓存、强制缓存、仅缓存。redirect：重定向，Chrome默认使用follow；follow(automaticredirection)error(重定向会自动终止并抛出错误)manual(手动处理重定向)referrer:发送请求的页面的URL，浏览器会默认将其添加到页面的请求头中.设置为no-referrer表示不添加。referrerPolicy：何时使用referrer，可选值：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url。integrity：设置资源对应的哈希值，保证资源的完整性。3.使用场景1.带凭证发送请求//带凭证的请求会从不同的来源发送fetch('https://example.com',{credentials:'include'})//只有相同的来源才会发送请求withcredentialsRequestfetch('https://example.com',{credentials:'same-origin'})//从不同来源发送没有凭据的请求fetch('https://example.com',{credentials:'省略'})2.上传JSON数据varurl='https://example.com/profile';vardata={username:'example'};fetch(url,{method:'POST',//or'PUT'body:JSON.stringify(data),//数据可以是`string`或{object}！headers:newHeaders({'Content-Type':'application/json'})}).then(res=>res.json()).catch(error=>console.error('Error:',error)).then(response=>console.log('Success:',response));3.可以上传文件通过HTML元素、FormData对象和fetch()方法上传文件。varformData=newFormData();varfileField=document.querySelector("input[type='file']");formData.append('username','abc123');formData.append('avatar',fileField.files[0]);fetch('https://example.com/profile/avatar',{method:'PUT',body:formData}).then(response=>response.json()).catch(error=>console.error('错误:',error)).then(response=>console.log('Success:',response));4.可以通过HTML元素上传多个文件，FormData()和fetch()上传文件。varformData=newFormData();varphotos=document.querySelector("input[type='file'][multiple]");formData.append('title','MyVegasVacation');//formData只接受Files,Blobsorstrings,arrays不能直接传递，所以必须嵌入一个循环for(leti=0;iresponse.json()).then(response=>console.log('成功：',JSON.stringify(response))).catch(error=>console.error('Error:',error));5、检查请求是否成功，可以通过以下方法捕获网络故障和服务器端CORS-limited错误，做进一步处理（比如写日志等）。fetch('flowers.jpg').then(function(response){if(response.ok){returnresponse.blob();}thrownewError('网络响应不正常');}).then(function(myBlob){varobjectURL=URL.createObjectURL(myBlob);myImage.src=objectURL;}).catch(function(error){console.log('你的获取操作出现问题：'，错误。message);});6、新建Request，发送http请求varmyHeaders=newHeaders();varmyInit={method:'GET',headers:myHeaders,mode:'cors',cache:'default'};varmyRequest=newRequest('flowers.jpg',myInit);fetch(myRequest).then(function(response){returnresponse.blob();}).then(function(myBlob){varobjectURL=URL.createObjectURL(myBlob);myImage.src=objectURL;});四、Headers1、创建Headers对象//法一varcontent="HelloWorld";varmyHeaders=newHeaders();myHeaders.append("Content-Type","text/plain");myHeaders.append("Content-Length",content.length.toString());myHeaders.append("X-Custom-Header","ProcessThisImmediately");//方法2myHeaders=newHeaders({"Content-Type":"text/plain","Content-Length":content.length.toString(),"X-Custom-Header":"ProcessThisImmediately",});2、Headers对象的方法Headers对象提供的读取、设置、判断方法console.log(myHeaders.has("Content-Type"));//trueconsole.log(myHeaders.has("Set-Cookie"));//falsemyHeaders.set("Content-Type","text/html");myHeaders.append("X-Custom-Header","AnotherValue");console.log(myHeaders.get("Content-Length"));//11console.log(myHeaders.getAll("X-Custom-Header"));//["ProcessThisImmediately","AnotherValue"]myHeaders.delete("X-Custom-Header");console.log(myHeaders.getAll("X-Custom-Header"));//[]3。属性错误设置Headers中不支持的属性会报错。varmyResponse=Response.error();try{myResponse.headers.set("Origin","http://mybank.com");}catch(e){console.log("不能冒充银行！");}4.数据格式确认获取数据后，首先检查数据格式，如果符合预期格式，则进行进一步处理。fetch(myRequest).then(function(response){if(response.headers.get("content-type")==="application/json"){返回response.json().then(function(json){//做进一步的数据处理});}else{console.log("Oops,wehaven'tgotJSON!");}});5.守卫属性Headers对象可用于请求发送和响应接收，它具有一个守卫属性，用于指示那些参数是只读的。none：默认request：从请求中获取的只读头（Request.headers）request-no-cors：从不同域的请求中获取的只读头（Request.modeno-cors）response：从响应头中获取（Response.headers)read-onlyimmutable：最常用于ServiceWorkers，所有headers都是只读的。6.Content-Type请求和响应（包括fetch()方法）都会尝试自动设置Content-Type。如果不设置Content-Type值，发送的请求也会自动设置该值。5.Responseobjectfetch发送请求后，返回一个Response对象，其常用属性有：Response.status：一个整数（默认值为200）是响应的状态码。Response.statusText：字符串（默认值为“OK”），这个值对应HTTP状态码消息。Response.ok：该属性是检查响应的状态是否在200-299范围内（包括200和299）。该属性返回一个布尔值。6.BodyObject请求和响应都可以有body对象。Request和Response对象都实现了以下方法获取不同格式body的内容：arrayBuffer()、blob()、json()、text()、formData()七、查看fetch是否可用？if(self.fetch){//在这里运行我的fetch请求}else{//用XMLHttpRequest做点什么？}8.其他1.fetch和jQuery.ajax()之间的区别fetch()接收到表示错误的HTTP状态代码（例如404或500），它会将Promise的resolve值设置为false，但不会拒绝。它只会在网络故障或请求被阻止时拒绝。fetch()可以接受跨域cookie，建立跨域会话。fetch()只有在使用了credentials选项的情况下才会发送cookie，但它必须遵守同源（same-origin）规则。2.fetch和axios的区别详见这里！3.CORS(cross-domainaccess)error/*Error:Accesstofetchat'×××'fromorigin'×××'hasbeenblockedbyCORSpolicy:No'Access-Control-Allow-Origin'标头不存在在请求的资源上。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用CORS的情况下获取资源。*/有关跨域访问的相关问题，请参见此处！9.参考文档学习fetch，从这里开始！
