Fetch API是一种新规范，用来取代XMLHttpRequest对象。Fetch API提供了一个fetch()方法，它被定义在BOM的window对象中，你可以用它来发起对远程资源的请求。它主要有两个特点：
接口合理化，Ajax是将所有不同性质的接口都放在XHR对象上，而Fetch是将它们分散在几个不同的对象上； Fetch操作返回Promise对象，避免了嵌套的回调函数。
IE不支持，用polyfill解决，基本原理是探测是否存在window.fetch方法，如果没有则用XHR实现。引入es6-promise.js
一、初识Fetch API
1、检查浏览器是否部署了Fetch API
if ("fetch" in window){
console.log('支持');
} else {
console.log('不支持');
}
2、看个例子
fetch(url).then(function (response) {
return response.json();
}).then(function (jsonData) {
console.log(jsonData);
}).catch(function () {
console.log('出错了');
});
二、Headers对象
用来构造/读取HTTP数据包的头信息。
var headers = new Headers();
headers.append("Accept", "application/json");
headers.append("Content-Type", "text/plain");
headers.append("Content-Length", content.length.toString());
headers.append("X-Custom-Header", "ProcessThisImmediately");
或者
var headers = new Headers({
"Content-Type": "text/plain",
"Content-Length": content.length.toString(),
"X-Custom-Header": "ProcessThisImmediately",
});
//对象方法
headers.has("Content-Type") // true
headers.has("Set-Cookie") // false
headers.set("Content-Type", "text/html")
headers.append("X-Custom-Header", "AnotherValue")
headers.get("Content-Length") // 11
headers.getAll("X-Custom-Header") // ["ProcessThisImmediately", "AnotherValue"]
headers.delete("X-Custom-Header")
headers.getAll("X-Custom-Header") // []
三、Request对象
用来构造HTTP请求。
var uploadReq = new Request("/uploadImage", {
method: "POST",
headers: {
"Content-Type": "image/png",
},
body: "image data"
});
Request对象实例有两个属性是只读的，不能手动设置。
referrer属性，表示请求的来源，由浏览器设置，有可能是空字符串。
context属性，表示请求发出的上下文，如果是image，表示是从img标签发出，如果是worker，表示是从worker脚本发出，如果是fetch，表示是从fetch函数发出的。
Request对象实例的mode属性，用来设置是否跨域，合法的值有以下3种：same-origin、no-cors（默认值）、cors。当设置为same-origin时，只能向同域的URL发出请求，否则会报错。
四、Response对象
1、属性
status：整数值，表示状态码（比如200）；
statusText：字符串，表示状态信息，默认是“OK”；
ok：布尔值，表示状态码是否在200-299的范围内；
headers：Headers对象，表示HTTP回应的头信息；
url：字符串，表示HTTP请求的网址；
type：字符串，合法的值有5个basic、cors、default、error、opaque。
basic表示正常的同域请求； cors表示CORS机制的跨域请求； error表示网络出错，无法取得信息，status属性为0，headers属性为空，并且导致fetch函数返回Promise对象被拒绝； opaque表示非CORS机制的跨域请求，受到严格限制。
2、方法
Response.error()返回一个type属性为error的Response对象实例。
Response.redirect(url, status)返回的Response对象实例会重定向到另一个URL。
五、Body属性
Request对象和Response对象都有body属性，表示请求的内容。body属性可能是以下的数据类型：
ArrayBuffer ArrayBufferView (Uint8Array等) Blob/File string URLSearchParams FormData
Request对象和Response对象都提供以下方法，用来读取body。
arrayBuffer() blob() json() text() formData()
注意，上面这些方法都只能使用一次，第二次使用就会报错，也就是说，body属性只能读取一次。Request对象和Response对象都有bodyUsed属性，返回一个布尔值，表示body是否被读取过。
这是因为body属性是一个stream对象，数据只能单向传送一次。这样的设计是为了允许JavaScript处理视频、音频这样的大型文件。
六、数据流读取器
.text()：返回字符串 .json()：返回一个JSON对象 .formData()：返回一个FormData对象 .blob()：返回一个blob对象 .arrayBuffer()：返回一个二进制数组 数据流只能读取一次，一旦读取，数据流就空了，再次读取就不会得到结果。解决方法是在读取之前，先使用.clone()方法，复制一份一模一样的副本。
七、fetch()
fetch()第1个参数可以是url字符串，也可以是Request对象实例。第2个参数可以传一个对象，里面指定一些配置项。fetch()返回一个Promise对象，并将response对象传给回调函数。
目前，还有一些XMLHttpRequest对象可以做到，但是Fetch API还没做到的地方，比如中途中断HTTP请求，以及获取HTTP请求的进度，这些不足与Fetch返回的是Promise对象有关。