使用Fetch
1、进行 fetch 请求
一个基本的 fetch请求设置起来很简单。看看下面的代码：
fetch('http://example.com/movies.json') .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(myJson); }); 这里我们通过网络获取一个JSON文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想fetch()到的资源路径，然后返回一个包含响应结果的promise(一个 对象)。
2、Headers
使用 的接口，你可以通过 构造函数来创建一个你自己的 headers 对象。一个 headers 对象是一个简单的多名值对：
var content = "Hello World";var myHeaders = new Headers();myHeaders.append("Content-Type", "text/plain");myHeaders.append("Content-Length", content.length.toString());myHeaders.append("X-Custom-Header", "ProcessThisImmediately"); 由于 Headers 可以在 request 请求中被发送或者在 response 请求中被接收，并且规定了哪些参数是可写的，Headers 对象有一个特殊的 guard 属性。这个属性没有暴露给 Web，但是它影响到哪些内容可以在 Headers 对象中被操作。
可能的值如下：
none：默认的request：从 request 中获得的 headers（）只读request-no-cors：从不同域（no-cors）的 request 中获得的 headers 只读response：从 response 中获得的 headers（）只读immutable：在 ServiceWorkers 中最常用的，所有的 headers 都只读。
3、Response 对象
如上述, 实例是在fetch()处理完promises之后返回的.
它的实例也可用通过JavaScript来创建, 但只有在中才真正有用,当使用方法并提供了一个自定义的response来接受request时:
var myBody = new Blob();addEventListener('fetch', function(event) { event.respondWith(new Response(myBody, { headers: { "Content-Type" : "text/plain" } });}); 构造方法接受两个可选参数—response的数据体和一个初始化对象(与所接受的init参数类似.)
你会用到的最常见的response属性有:
- — 整数(默认值为200) 为response的状态码.
- — 字符串(默认值为"OK"),该值与HTTP状态码消息对应.
- — 如上所示, 该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个值.
4、Body
不管是请求还是响应都能够包含body对象. body也可以是以下任意类型的实例.
- (Uint8Array and friends)
- /File
- string
类定义了以下方法 (这些方法都被 和所实现)以获取body内容. 这些方法都会返回一个被解析后的promise对象和数据.
比起XHR来，这些方法让非文本化的数据使用起来更加简单。
请求体可以由传入body参数来进行设置:
var form = new FormData(document.getElementById('login-form'));fetch("/login", { method: "POST", body: form}) request和response（包括fetch() 方法）都会试着自动设置Content-Type。如果没有设置Content-Type值，发送的请求也会自动设值。
5、特性检测
Fetch API 的支持情况，可以通过检测, , 或 是否在 或 域中。例如：
if(self.fetch) { // run my fetch request here} else { // do something with XMLHttpRequest?}