什么是Fetch

一句话总结：Fetch是XMLHttpRequest一个更先进的替代方案（A Modern Replacement for XMLHttpRequest）。
fetch是全局变量window的一个方法，用来发起网络请求、获取资源，是传统基于XMLHttpRequest对象的AJAX技术的更优替代方案。
fetch暂时不支持abort request。

使用方法

先看一个最简单的get用法示例：

// url (required), options (optional)
fetch('https://davidwalsh.name/some/url', {
    method: 'get'
}).then(function(response) {

}).catch(function(err) {
    // Error :(
});

下面是一个稍微复杂的post用法示例：

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

  return response.text()
}, function(error) {
  error.message //=> String
})

fetch使用Promises来处理response。fetch接收两个参数：

url：string类型，必选，发起请求的地址
options：object类型，可选，请求的配置参数

还可以使用Request对象实例作为参数的方式发起fetch请求：

var request = new Request(url, options);
fetch(request).then(function(response) {
  // handle with response...
}).catch(function(err) {
  // Error :(
});

Options配置项

options可以配置以下参数：

1.method (String) - HTTP 请求方法，默认："GET"
2.body (String, body types) - HTTP 请求主体，示例：

{
  body: new URLSearchParams([['foo', 1], ['bar', 2]]).toString()
}

body的类型包括：

Class	Default Content-Type
String	text/plain;charset=UTF-8
URLSearchParams	application/x-www-form-urlencoded;charset=UTF-8
FormData	multipart/form-data
Blob	inherited from the blob.type property
ArrayBuffer
TypedArray
DataView

其他数据结构需要预先编码为上述类型之一。例如，JSON.stringify(data)可用于将数据结构序列化为JSON字符串。

3.headers (Object, Headers) - 请求头，默认：{}，示例：

{
  headers: new Headers({
    'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
  }) 
}

headers提供以下方法增删改查头部信息：

has(name) (boolean)
get(name) (String)
set(name, value)
append(name, value)
delete(name)
forEach(function(value, name){ ... }, [thisContext])

4.credentials (String) - 跨域请求时方身份验证凭证模式，默认："omit"
"omit" - 请求中不携带身份验证凭证（例如cookies）
"same-origin" - 在对同一站点的请求中包含身份验证凭证
"include" - 在所有站点的请求中包含身份验证凭证

响应结果Response

Response表示来自服务器的HTTP响应。Response会作为promise回调函数的参数。包含以下属性：

status (number) - HTTP状态码，范围在100–599之内
statusText (String) - 响应文本，如："Unauthorized"
ok (boolean) - status为2xx时表示响应成功，值为true
headers (Headers)
url (String)

此外，response还提供了一些方法处理成特定的数据格式并返回一个Promise:

text() - 以字符串形式生成响应文本
json() - 生成JSON.parse(responseText)的结果
blob() - 生成一个Blob
arrayBuffer() - 生成一个ArrayBuffer
formData() - 生成可转发到另一个请求的表单数据

示例：

response.blob().then(function(myBlob) {
  // do something with myBlob
});

错误处理

如果出现网络错误或其他原因导致HTTP请求无法完成，fetch()的promise 将会reject该error。
注意，在HTTP 4xx或5xx服务器响应的情况下，promise不会reject。这个promise将像HTTP 2xx一样正常resolve。可以通过检查response.status的状态码来决定如何处理错误：

fetch(...).then(function(response) {
  if (response.ok) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
})