1.1、fetch利用语法

fetch(url,options).then((response)=>{//处理http相应},(error)=>{//处理缺点})

url ：是发送网络要求的地址。

options：发送要求参数,

fetchpostjsonphp前后端数据交互四fetch 要求详解 SQL

body - http要求参数mode - 指定要求模式。
默认值为cros:许可跨域;same-origin:只许可同源要求;no-cros:只限于get、post和head,并且只能利用有限的几个大略标头。
cache - 用户指定缓存。
method - 要求方法，默认GETsignal - 用于取消 fetchheaders - http要求头设置keepalive - 用于页面卸载时，见告浏览器在后台保持连接，连续发送数据。
credentials - cookie设置，默认omit，忽略不带cookie，same-origin同源要求带cookie，inclue无论跨域还是同源都会带cookie。

1.2、response 工具

fetch 要求成功后，相应 response 工具如图：

status - http状态码，范围在100-599之间statusText - 做事器返回状态笔墨描述ok - 返回布尔值，如果状态码2开头的，则true,反之falseheaders - 相应头body - 相应体。
相应体内的数据，根据类型各自处理。
type - 返回要求类型。
redirected - 返回布尔值，表示是否发生过跳转。

1.3、读取内容方法

response 工具根据做事器返回的不同类型数据，供应了不同的读取方法。
分别有：

response.text() -- 得到文本字符串response.json() - 得到 json 工具response.blob() - 得到二进制 blob 工具response.formData() - 得到 fromData 表单工具response.arrayBuffer() - 得到二进制 arrayBuffer 工具

上述 5 个方法，返回的都是 promise 工具，必须等到异步操作结束，才能得到做事器返回的完全数据。

1.4、response.clone()

stream 工具只能读取一次，读取完就没了，这意味着，上边的五种读取方法，只能利用一个，否则会报错。

因此 response 工具供应了 clone() 方法，创建 respons 工具副本，实现多次读取。
如下：将一张图片，读取两次：

const response1 = await fetch('flowers.jpg');const response2 = response1.clone();const myBlob1 = await response1.blob();const myBlob2 = await response2.blob();image1.src = URL.createObjectURL(myBlob1);image2.src = URL.createObjectURL(myBlob2);

1.4、response.body()

body 属性返回一个 ReadableStream 工具，供用户操作，可以用来分块读取内容，显示下载的进度便是个中一种运用。

const response = await fetch('flower.jpg');const reader = response.body.getReader();while(true) { const {done, value} = await reader.read(); if (done) { break; } console.log(`Received ${value.length} bytes`)}

response.body.getReader() 返回一个遍历器，这个遍历器 read() 方法每次都会返回一个工具，表示本次读取的内容块。

二、要求时 POST 和 GET 分别处理

要求办法不同，传值办法也不同。
xhr 会分别处理 get 和 post 数据传输，还有要求头设置，同样 fetch 也须要分别处理。

2.1、get 办法

只须要在url中加入传输数据，options中加入要求办法。
如下面代码所示：

<input type="text" id="user"><br><input type="password" id="pas"><br><button onclick="login()">提交</button><script> function login(){ fetch(`http://localhost:80/fetch.html?user=${user.value}&pas=${pas.value}`,{ method:'GET' }).then(response=>{ console.log('相应',response) }) }</script>

2.2、post 办法

利用 post 发送要求时，须要设置要求头、要求数据等。

将上个实例，改写成 post 办法提交数据，代码如下：

fetch(`http://localhost:80/ES6练习题/53fetch.html`,{ method:'POST', headers:{ 'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8' }, body:`user=${user.value}&pas=${pas.value}` }).then(response=>{ console.log('相应',response)})

如果是提交json数据时，须要把json转换成字符串。
如

body:JSON.stringify(json)

如果提交的是表单数据，利用 formData转化下，如：

body:new FormData(form)

上传文件，可以包含在全体表单里一起提交，如：

const input = document.querySelector('input[type="file"]');const data = new FormData();data.append('file', input.files[0]);data.append('user', 'foo');fetch('/avatars', { method: 'POST', body: data});

上传二进制数据，将 bolb 或 arrayBuffer 数据放到body属性里，如：

let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));let response = await fetch('/article/fetch/post/image', { method: 'POST', body: blob});三、fetch 常见坑

3.1、fetch兼容性

fetch原生支持率如图：

fetch 是相对较新的技能，IE浏览器不支持，还有其他低版本浏览器也不支持，因此如果利用fetch时，须要考虑浏览器兼容问题。

办理办法：引入 polyfill 完美支持 IE8 以上。

由于 IE8 是 ES3，须要引入 ES5 的 polyfill: es5-shim, es5-sham引入 Promise 的 polyfill：es6-promise引入 fetch 探测库：fetch-detector引入 fetch 的 polyfill： fetch-ie8可选：如果你还利用了 jsonp，引入 fetch-jsonp可选：开启 Babel 的 runtime 模式，现在就利用 async/await

polyfill 的事理便是探测fetch是否支持，如果不支持则用 xhr 实现。
支持 fetch 的浏览器，相应中文会乱码，以是利用 fetch-detector 和 fetch-ie8 办理乱码问题。

3.2、fetch默认不带cookie

通报cookie时，必须在header参数内加上 credentials:'include'，才会像 xhr 将当前cookie 带有要求中。

3.3、非常处理

fetch 不同于 xhr ，xhr 自带取消、缺点等方法，以是做事器返回 4xx 或 5xx 时，是不会抛出错误的，须要手动处理，通过 response 中的 status 字段来判断。