高效网络请求之Fetch

Fetch是一个处理网络请求的框架， 支持了大部分常用的 HTTP 的请求以及和 HTTP 标准的兼容，如 HTTP Method，HTTP Headers，Request，Response。代替ajax可以更加方便的处理异步请求。

兼容性

点击查看fetch兼容性一览表

注：在 Chrome 浏览器中已经全局支持了 fetch 函数，window.fetch就可以访问到该方法。打开调试工具，在 Console 中可以进行调试和使用。

使用

fetch('www.baidu.com/api',{
    headers: {
        'Cache-Control': 'no-cache'
    }
})
.then(response => {
    //do something here...
})

第一个参数是请求的URL，第二个参数是一个参数对象用于配置请求。请求对象一旦创建了， 你便可以将所创建的对象传递给fetch()方法。

另外，可以给fetch统一传递一个request 对象，所以也可以通过如下代码配置和发送请求：

var req = new Request(URL, {method: 'GET', cache: 'reload'});
fetch(req)
.then(function(response) {
  return response.json();
}).then(function(json) {
    //do something here
});

注：使用fetch请求之后，返回一个Promise,所以可以使用fetch().then() 处理

Request

Request 对象表示一次 fetch 调用的请求信息。传入 Request 参数来调用 fetch, 可以执行很多自定义请求的高级用法。
常用的参数配置有：
1. method - 支持 GET, POST, PUT, DELETE, HEAD
2. url - 请求的 URL
3. headers - 对应的 Headers 对象
4. referrer - 请求的 referrer 信息
5. mode - 可以设置 cors, no-cors, same-origin
6. credentials - 设置 cookies 是否随请求一起发送。可以设置: omit, same-origin
7. redirect - follow, error, manual
8. integrity - subresource 完整性值(integrity value)
9. cache - 设置 cache 模式 (default, reload, no-cache)

注意：只有第一个参数 URL 是必需的。在 Request 对象创建完成之后, 所有的属性都变为只读属性.

Response

使用fetch网路请求之后，在then 的回调函数内接收到response 参数，代码如上，关于该参数的详细解释

常用的几个有：(可以查看上文的截图)
1. Response.status 也就是 StatusCode，如成功就是 200 ；
2. Response.statusText 是 StatusCode 的描述文本，如成功就是 OK ；
3. Response.ok 一个 Boolean 类型的值，判断是否正常返回，也就是StatusCode 为 200-299

Reference：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
http://web.jobbole.com/84924/
http://blog.csdn.net/renfufei/article/details/51494396
http://stackoverflow.com/questions/29775797/fetch-post-json-data