简介

fetch 不是 ajax，是浏览器新提供的一个API，是基于Promise设计，旧浏览器不支持 Promise。并且 fetch 的出现是为了取代 ajax 。

备注：如果低版本的浏览器需要兼容 fetch，需要使用 pollyfill es6-promise。

基本使用

fetch(url, options).then(function(response) { 
// handle HTTP response
}, function(error) {
 // handle network error
})

说明：

fetch api返回的是一个promise对象
Options:
- method(String): HTTP请求方法，默认为GET
- body(String): HTTP的请求参数
- headers(Object): HTTP的请求头，默认为{}
- credentials(String): 默认为 omit，忽略的意思，也就是不带 cookie ；还有两个参数，same-origin ，意思就是同源请求带 cookie ；include，表示无论跨域还是同源请求都会带cookie
第一个 then 函数里面处理的是 response的格式，这里的response具体如下：
status(number): HTTP返回的状态码，范围在100-599之间
statusText(String): 服务器返回的状态文字描述，例如Unauthorized,上图中返回的是Ok
ok(Boolean): 如果状态码是以2开头的，则为true
headers: HTTP请求返回头
body: 返回体，这里有处理返回体的一些方法
- text(): 将返回体处理成字符串类型
- json()：返回结果和 JSON.parse(responseText)一样
- blob()：返回一个Blob，Blob对象是一个不可更改的类文件的二进制数据
- arrayBuffer()
- formData()

如 caniuse 所示，IE 浏览器完全不支持 fetch ，移动端的很多浏览器也不支持，所以，如果要在这些浏览器上使用 Fetch，就必须使用fetch polyfill

cookie 传递
- 必须在 header 参数里面加上 credentials: 'include'，才会如 xhr 一样将当前 cookies 带到请求中去
fetch和xhr的不同
- fetch 虽然底层，但是还是缺少一些常用 xhr 有的方法，比如能够取消请求（abort）方法
- fetch 在服务器返回 4xx、5xx 时是不会抛出错误的，这里需要手动通过，通过 response 中的 ok 字段和 status 字段来判断