㈠官方介绍fetch
⑴在Fetch API中说到：
“The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set”.
即Fetch API提供了一个用于获取资源(包括通过网络)的接口。对于任何使用过XMLHttpRequest的人来说，这看起来都很熟悉，但是新的API提供了更强大、更灵活的特性集。
⑵Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。
它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
⑶这种功能以前是使用 XMLHttpRequest实现的。
Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。
Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。
㈡fetch的使用方法
⑴基本概念
Headers表示响应/请求标头，允许您查询它们并根据结果采取不同的操作。
Request表示资源请求。
Response表示对请求的响应。
⑵基本用法
fetch 接受一个 url 作为参数，发起 GET 请求，返回 Promise ,请求成功后将返回结果封装为一个 Response 对象，该对象上具有一些方法（比如 json 方法），调用 json 方法后同样返回一个 Promise 对象，并用解析 json 字符串得到的对象来 resolve。
⑶语法：
第一种：
fetch(url, options).then(function(response) {
// handle HTTP response
}, function(error) {
// handle network error
})
第二种：
fetch('api/data.json', {
method:'POST', //请求类型GET、POST
headers:{},// 请求的头信息，形式为 Headers 对象或 ByteString。
body:{},//请求发送的数据 blob、BufferSource、FormData、URLSearchParams（get或head方法中不能包含body）
mode:'',//请求的模式,是否跨域等，如 cors、 no-cors 或者 same-origin。
credentials:'',//cookie的跨域策略，如 omit、same-origin 或者 include。
cache:'', //请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.
}).then(function(response) { ... });
⑷具体示例：
require('babel-polyfill')
require('es6-promise').polyfill()
import 'whatwg-fetch'
fetch(url, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json"
},
credentials: "same-origin"
}).then(function(response) {
response.status //=> number 100–599
response.statusText //=> String
response.headers //=> Headers
response.url //=> String
response.text().then(function(responseText) { ... })
}, function(error) {
error.message //=> String
})
⑸具体分析
1.url
定义要获取的资源。这可能是：
• 一个 USVString 字符串，包含要获取资源的 URL。
• 一个 Request 对象。
options（可选）
一个配置项对象，包括所有对请求的设置。可选的参数有：
• method: 请求使用的方法，如 GET、POST。
• headers: 请求的头信息，形式为 Headers 对象或 ByteString。
• body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
• mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
• credentials: 请求的 credentials，如 omit、same-origin 或者 include。
• cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。
2.response
一个 Promise，resolve 时回传 Response 对象：
• 属性：
① status (number) - HTTP请求结果参数，在100–599 范围
② statusText (String) - 服务器返回的状态报告
③ ok (boolean) - 如果返回200表示请求成功则为true
④headers (Headers) - 返回头部信息，下面详细介绍
⑤ url (String) - 请求的地址
• 方法：
① text() - 以string的形式生成请求text
② json() - 生成JSON.parse(responseText)的结果
③blob() - 生成一个Blob
④ arrayBuffer() - 生成一个ArrayBuffer
⑤formData() - 生成格式化的数据，可用于其他的请求
• 其他方法：
①clone()
② Response.error()
③ Response.redirect()
3.response.headers
① has(name) (boolean) - 判断是否存在该信息头
② get(name) (String) - 获取信息头的数据
③ getAll(name) (Array) - 获取所有头部数据
④ set(name, value) - 设置信息头的参数
⑤ append(name, value) - 添加header的内容
⑥delete(name) - 删除header的信息
⑦forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息
4.mode
①no-cors 允许来自CDN的脚本、其他域的图片和其他一些跨域资源，但是首先有个前提条件，就是请求的method只能是”HEAD”,”GET”或者”POST”。此外，任何 ServiceWorkers 拦截了这些请求，它不能随意添加或者改写任何headers，除了这些。第三，JavaScript不能访问Response中的任何属性，这保证了 ServiceWorkers 不会导致任何跨域下的安全问题而隐私信息泄漏。
②cors 通常用作跨域请求来从第三方提供的API获取数据。这个模式遵守CORS协议。只有有限的一些headers被暴露给Response对象，但是body是可读的。
③same-origin 如果一个请求是跨域的，那么返回一个简单的error，这样确保所有的请求遵守同源策略。
5.cache
①default 缓存相同的请求
②no-store 不缓存任何请求
③reload 创建一个正常的请求，并用响应更新HTTP缓存
④no-cache 如果HTTP缓存中有响应，并且不是正常请求，则Fetch创建条件请求。然后，它使用响应更新HTTP缓存。
⑤force-cache Fetch使用HTTP缓存中与请求匹配的任何响应，不管是否过期。如果没有响应，则会创建正常请求，并使用响应更新HTTP缓存。
⑥only-if-cached Fetch使用HTTP缓存中与请求匹配的任何响应，不管是否过期。如果没有响应，则返回网络错误。
（只有当请求的模式为“same-origin”时，才能使用任何缓存重定向，假设请求的重定向模式为“follow”，重定向不会违反请求的模式）。
如果header中包含名称为“If-Modified-Since”，“If-None-Match”，“If-Unmodified-Since”，“If-Match”和“If-Range”之一，如果是“default”，fetch 会将 cache 自动设置为 “no-store”。
㈢Fetch API
Fetch API 包含一组类和方法，用来简化 HTTP 请求。其中包含以下方法和类：
①fetch 方法：用于发起 HTTP 请求
②Request 类：用来描述请求
③Response 类：用来表示响应
④Headers 类：用来表示 HTTP 头部信息
㈣fetch 方法
★fetch 方法有两种调用方法，
第一个参数可以是一个 Request 对象，也可以是一个简单的 url
第二个参数是可选参数，包含一些配置信息。
如下：
Promise fetch(String url [, Object options]);
Promise fetch(Request req [, Object options]);
★可选的配置信息可以一个简单对象，可以包含下列字段：
①method: 请求的方法, 比如： GET, POST
②headers：请求头部信息，可以是一个 Headers 对象的实例，也可以是一个简单对象
③body: 任何希望发送的信息，可以是 Blob, BufferSource, FormData, URLSearchParams, 或者 USVString。需要注意的是 GET 和 HEAD 方法不能包含 body。
④mode：请求的模式，可以取这几个值：cors, no-cors, same-origin, navigate
⑴same-origin：只允许同源的请求，否则直接报错
⑵cors：允许跨域，但也要要求响应中 Access-Control-Allow-Origin 这样的头部信息表示允许跨域，响应中只有部分头部信息可以读取，但响应内容可以不受限地读取。
⑶no-cors：只允许使用 HEAD、 GET 和 POST 方法，且 JavaScript 不允许访问 response 中的内容。ServiceWorkers 拦截了这些请求，它不能随意添加或者改写任何headers。
⑷navigate：用于支持页面导航。通常使用不到。
⑤credentials：表示是否发送 cookie，有三个可选值 omit, same-origin, includecache：表示处理缓存的策略
⑴omit：不发生 cookie
⑵same-origin： 仅在同源时发生 cookie
⑶include：发送 cookie
⑥redirect：发生重定向时候的策略。有以下可选值：referrer： 一个字符串，可以是 no-referrer, client, 或者是一个 URL。默认值是 client。
⑴follow：跟随
⑵error：发生错误
⑶manual：需要用户手动跟随
⑦integrity：包含一个用于验证子资源完整性的字符串。
★该函数返回一个 Promise 对象，若请求成功会用 Response 的实例作为参数调用 resolve ，若请求失败会用一个错误对象来调用 reject。
㈤Headers 类
①请求头对象，Fetch API 的Headers类允许你去对HTTP request 和 response 的headers执行各种操作。
②这些操作包括：检索, 设置, 添加和删除。
③一个Headers类里包含一个header列表, 它的初始值为空或者是零个或多个键值对。
④你可以使用 append()方法添加， 这个类中所有的方法, 其 header的名字顺序匹配并不区分大小写。
★Headers 类用来表示 HTTP 的头部信息，其构造函数可以接受一个表示 HTTP 头信息的对象，也可以接受一个 Headers 类的实例作为对象：
var header1 = new Headers({
'Content-Type': 'image/jpeg',
'Accept-Charset': 'utf-8'
});
var header2 = new Headers(header1);
★Headers 实例的方法
①append()
添加一个header信息
②delete()
删除指定的header
③get()
从Headers对象中返回指定的值
④getAll()
返回全部的header
⑤has()
检测指定的header，返回布尔值
⑥set()
修改或添加header
⑦forEach()
遍历所有的字段，接受一个回调函数，和可选的第二个参数。可选的第二个参数地值作为回调函数的 this 值。
⑧entries()
返回headers对象中的所有键值对，是一个 iterator 对象
⑨keys()
返回所有的header的键，是一个iterator对象
⑩values()
返回所有的header的值 ，是一个iterator对象
㈥Request 类
★Request 对象用于描述请求内容。
构造函数接受的参数和 fetch 函数的参数形式一样，实际上 fetch 方法会使用传入的参数构造出一个 Request 对象来。
下面例子从 github 抓取到 react 的 star 数并打印出来。
var req = new Request('https://api.github.com/repos/facebook/react',{
method:'GET'
});
fetch(req).then(function(res){
return res.json()
}).then(function(data){
console.log(data.stargazers_count)
});
★Request 实例的属性
以下属性均为只读属性。
①method：请求的方法POST/GET等
②url：请求的地址
③headers：请求头（可以是Headers对象，也可是JSON对象）
④referrer：指定请求源地址
⑤referrerPolicy：处理来源信息的策略
⑥mode：请求的模式（是跨域cors还是正常请求no-cors）
⑦credentials：跨域请求时，是否携带cookie信息（omit跨域携带/same-origin同源携带）
⑧redirect：重定向
⑨integrity：一个散列值，用于检验请求资源的完整性
⑩cache：是否缓存这个请求
★Request的方法
clone() 复制一个当前request对象的实例
㈦Response 类
★Response 用来表示 HTTP 请求的响应。
其构造函数形式如下：
var res = new Response(body, init);
★Body
Fetch mixin 对象，提供了关联 response/request 中 body 的方法，可以定义它的文档类型以及请求如何被处理。
Request 和 Response 对象都实现了Body的接口，所以都拥有Body的方法和属性，
用于指定请求体中的body或响应体的内容的数据类型（arrayBuffer/blob /json/text) 主要是做数据类型的转换。
⑴属性
bodyUsed 用于判断是否在响应体中是否设置过body读取类型
⑵方法
①Blob()：将响应流转换为大的二进制的promise对象，并将bodyUsed 状态改为已使用，一般用于文件读取（下载大文件或视频）
②arrayBuffer()： 将响应流转换为buffer数组的promise对象，并将bodyUsed状态改为已使用
③FormData()：将响应流转换为formData的promise对象，并将bodyUsed状态改为已使用
④json()：将响应流转换为json的promise对象，并将bodyUsed状态改为已使用
⑤text()：将响应流转换为文本字符串的promise对象，并将bodyUsed状态改为已使用
⑵init 是一个对象，其中包括以下字段：
①status：响应的状态码，比如 200，404
②statusText：状态信息，比如 OK
③headers: 头部信息，可以是一个对象，也可以是一个 Headers 实例
★Response 实例属性
以下属性均为只读属性
①bodyUsed：用于表示响应内容是否有被使用过
②headers：头部信息
③ok：表明请求是否成功，当响应的状态码是 200~299 时，该值为 true
④status：状态码（1xx-5xx）
⑤statusText：状态信息
⑥type：表明了响应的类型，可能是下面几种值：url：响应的地址
- basic： 同源
- cors：跨域
- error：出错
- opaque：Request 的 mode 设置为 “no-cors” 的响应
⑦url：包含Response的URL
⑧useFinalURL：包含了一个布尔值来标示这是否是该Response的最终URL
★方法
①clone：复制一个响应对象
要想从 Response 的实例中拿到最终的数据需要调用下面这些方法，这些方法都返回一个 Promise 并且使用对应的数据类型来 resolve。
②arrayBuffer：把响应数据转化为 arrayBuffer 来 resolve
③blob：把响应数据转换为 Blob 来 resolve
④formData：把响应数据转化为 formData 来 resolve
⑤json：把响应数据解析为对象后 resolve
⑥text：把响应数据当做字符串来调用 resolve
㈧实例总结：
1 // 构造出 Request 对象
2 var req = new Request('https://api.github.com/repos/facebook/react',{
3 method:'GET'
4 });
5
6 // 发起请求，fetch 方法返回一个 Promise 对象
7 fetch(req).then(function(res){
8 // 得到了 response，这里调用 response 的 json 方法
9 // 该方法同样返回一个 Promise
10 return res.json();
11 }).then(function(data){
12 // 得到解析后的对象
13 console.log(data.stargazers_count)
14 });
参考：https://www.cnblogs.com/liuwei-0313/p/10059004.html
https://segmentfault.com/a/1190000010066409
http://jartto.wang/2017/01/17/xhr-or-fetch-api/
http://coderlt.coding.me/2016/11/20/JS-Feach/