Fetch API

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对象有关。