fetch

认识到fetch是一次很偶然的时机。那是在阮一峰讲解redux中的异步操作中使用到了fetch，当时我很费解，这货怎么能直接使用then()方法呢…

简介

fetch是w3c推出来的用来取代ajax的一种标准。

fetch的使用

一般构造请求的方法

使用 fetch 的构造函数请求数据后，返回一个 Promise 对象，处理即可。

fetch(URL)
  .then(function(response){
     // do something...
})

fetch构成函数的其他选项

var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
myHeaders.append("Cache-Control", "no-cache"); // 每次 API 的请求我们想不受缓存的影响

var myInit = {
  method: 'GET', // 这里切换请求方式
  headers: myHeaders,
  mode: 'cors',
  cache: 'default'
};

fetch(URL, myInit)
.then(function(response){
    // do something...
})

返回的数据结构

常用的数据有：

• Response.status也就是StatusCode，如成功就是200。
• Response.statusText是StatusCode的描述文本，如成功就是OK。
• Response.ok一个Boolean类型的值，判断是否正常返回，也就是StatusCode为200-299。

Body参数

因为在Request和Response中都包含Body的实现，所以包含以下类型：
ArrayBuffer、 ArrayBufferView (Uint8Array and friends)、 Blob/File、 string、 URLSearchParams、 FormData。
在fetch中实现了对应的方法，并返回的都是Promise类型：
arrayBuffer()、 blob()、 json()、 text()、 formData()

兼容性问题

原生支持率并不高，幸运的是，引入下面这些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