在使用JavaScript编写Web代码时，有许多Web API可供调用。其中Fetch API提供了一个获取资源的接口（包括跨域请求），用于访问和操作HTTP请求的一些具体部分，如请求头
Headers、请求Request、响应Response和参数Body。
# fetch API接口
# 基本概念
Fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案，是原生的js。可以在请求中的type查看到fetch请求的类型是fetch，普通的ajax请求的类型是xhr。
Fetch API 是基于Promise的。核心在于对HTTP接口的抽象，包含 Request (opens new window)，Response (opens new window)，Headers (opens new window)，Body (opens new window)，以及用于初始化异步请求的 global fetch (opens new window)。
global fetch是位于 WorkerOrGlobalScope (opens new window) 中的一个 mixin 的 fetch() 方法，返回一个promise实例，该promise会在请求响应后被resolve，并传回Response对象。
window和WorkerGlobalScope都实现了WorkerOrGlobalScope，即window中存在fetch()方法，可以在任何地方调用fetch()方法。
从fetch()返回的Promise 不会被标记为reject（即使响应的HTTP状态码是404或500），而是将Promise的状态变为resolve，但返回的response中的ok属性为false。仅当网络故障时或请求被阻止时，才会标记为reject。
# 基本语法
语法：fetch(input[,init])
参数：
- input：获取资源的URL，或是一个Request对象
- init：初始化参数（一个配置对象），可选参数有：
- method： 请求方式，GET, POST, PUT, DELETE, etc.
- headers：请求的头信息。可以指定参数类型
Content-Type。 - body：请求参数。 需要与header中的 'Content-Type' 匹配。
- mode：请求的模式，如
cors、no-cors 或者same-origin。 - credentials： 请求的 credentials，如
omit、``same-origin 或者include。若需要当前域名内自动发送cookie，则必须提供该参数。 - cache：请求的cache模式，
default、no-store、reload、no-cache、force-cache或者only-if-cached。 - redirect：可用的 redirect 模式:
follow(自动重定向),error(如果产生重定向将自动终止并且抛出一个错误）, 或者manual(手动处理重定向). 在Chrome中默认使用follow（Chrome 47之前的默认值是manual） - referrer：
no-referrer、``client或一个 URL。默认是client。 - referrerPolicy： 指定了HTTP头部referer字段的值。可能为以下值之一：
no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url 。 - integrity：包括请求的 subresource integrity (opens new window) 值。
如果请求头Headers中没有设置 Content-Type 值，发送的请求也会自动设值。因为request和response（包括 fetch() 方法）都会试着自动设置 Content-Type。
Content-Type的可选值：
text/html：HTML文档标记image/jpeg：JPEG图片标记image/gif：GIF图片标记application/javascript：js文档标记application/xml：xml文件标记，如果是text/xml的话，将忽略xml数据里的编码格式multipart/form-data：文件上传application/x-www-form-urlencoded：普通表单
# 基本使用
一个基本的fetch请求设置起来很简单，最简单的用法是只提供一个资源路径的URL，然后返回一个包含响应结果的promise（一个Response对象）。
fetch('http://localhost:8080/geoserver/wfs')
.then(function(response){
//handle HTTP response
return response.json();
})
.then(function(value){
//do something
});
2
3
4
5
6
7
8
Response (opens new window) 实例是在 fetch() 处理完 promise 之后返回的。其包含以下属性（只读）：
Response.headers：包含此 Response 所关联的Headers(opens new window) 对象。Response.ok：包含了一个布尔值，标示该 Response 成功Response.redirected：表示该Response是否来自一个重定向，如果是的话，它的 URL 列表将会有多个条目。Response.status：包含 Response 的状态码（HTTP 状态码的范围在 200-299）Response.statusText：包含了与该 Response 状态码一致的状态信息（例如，OK对应200）。Response.type：包含Resposne的类型（例如：basic、cors）Repsonse.url：包含 Response 的URL。Response.body：一个简单的 getter，用于暴露一个ReadableStream(opens new window) 类型的 body 内容。Response.bodyUsed：包含了一个布尔值(opens new window)来标示该 Response 是否读取过Body(opens new window)。
不管是请求还是响应都能够包含 body 对象。而 Request (opens new window) 和Response (opens new window)也都实现了Body 类的一些方法以获取body的内容。例如：
Response.json()：读取Response(opens new window) 对象并且将它设置为已读，并返回一个被解析为JSON(opens new window) 格式的 Promise 对象。Response.text()：读取Response(opens new window) 对象并且将它设置为已读，并返回一个被解析为USVString(opens new window) 格式的 Promise 对象。Response.formData()：读取Response(opens new window) 对象并且将它设置为已读，并返回一个被解析为FormData(opens new window) 格式的 Promise 对象。Response.blob()：读取Response(opens new window) 对象并且将它设置为已读，并返回一个被解析为Blob(opens new window) 格式的 Promise 对象。Response.arrayBuffer()：读取Response(opens new window) 对象并且将它设置为已读，并返回一个被解析为ArrayBuffer(opens new window) 格式的 Promise 对象。
因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次。
# 参考文章
[1] Fetch 接口 (opens new window) https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
[2] Response (opens new window) https://developer.mozilla.org/zh-CN/docs/Web/API/Response