相信大家应该都有所了解，在这个AJAX时代，如果想进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题，但是当我们进行一些异步请求时，都可以使用 fetch 进行完美的网络请求。下面话不多说，来一起看看详细的介绍吧。
先来看看各个浏览器对fetch的原生支持情况，可以看到支持性并不是很高，safari在10.1 之后才支持，ios更是10.3之后才支持，IE完全不支持。当然新技术的发展总会经历这个过程。
Ajax请求
普通的Ajax请求，用XHR发送一个json请求一般是这样的：
var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.responseType = 'json'; xhr.onload = function(){ console.log(xhr.response); }; xhr.onerror = function(){ console.log("error") } xhr.send();
使用fetch实现的方式：
fetch(url).then(function(response){ return response.json(); }).then(function(data){ console.log(data) }).catch(function(e){ console.log("error") })
也可以用async/await的方式
try{ let response = await fetch(url); let data = await response.json(); console.log(data); } catch(e){ console.log("error") }
用了await后，写异步代码感觉像同步代码一样爽。await后面可以跟Promise对象，表示等待Promise resolve()才会继续下去执行，如果Promise被reject()或抛出异常则会被外面的try...catch捕获。
使用fetch
fetch的主要优点是
语法简洁，更加语义化
基于标准的Promise实现，支持async/await
同构方便
但是也有它的不足
fetch请求默认是不带cookie的，需要设置fetch(url, {credentials: 'include'})
服务器返回400,500这样的错误码时不会reject,只有网络错误这些导致请求不能完成时，fetch才会被reject.
fetch语法：
fetch(url, options).then(function(response) { // handle HTTP response }, function(error) { // handle network error })
具体参数案例：
//兼容包 require('babel-polyfill') require('es6-promise').polyfill() import 'whatwg-fetch' 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 response.text().then(function(responseText) { ... }) }, function(error) { error.message //=> String })
参数说明
url
定义要获取的资源。这可能是：一个 USVString 字符串，包含要获取资源的 URL。一个 Request 对象。
options（可选）
一个配置项对象，包括所有对请求的设置。可选的参数有：
method: 请求使用的方法，如 GET、POST。
headers: 请求的头信息，形式为 Headers 对象或 ByteString。
body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
credentials: 请求的 credentials，如 omit、same-origin 或者 include。
cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。
response
一个 Promise，resolve 时回传 Response 对象：
属性：
status (number) - HTTP请求结果参数，在100–599 范围
statusText (String) - 服务器返回的状态报告
ok (boolean) - 如果返回200表示请求成功则为true
headers (Headers) - 返回头部信息，下面详细介绍
url (String) - 请求的地址
方法：
text() - 以string的形式生成请求text
json() - 生成JSON.parse(responseText)的结果
blob() - 生成一个Blob
arrayBuffer() - 生成一个ArrayBuffer
formData() - 生成格式化的数据，可用于其他的请求
其他方法：
clone()
Response.error()
Response.redirect()
response.headers
has(name) (boolean) - 判断是否存在该信息头
get(name) (String) - 获取信息头的数据
getAll(name) (Array) - 获取所有头部数据
set(name, value) - 设置信息头的参数
append(name, value) - 添加header的内容
delete(name) - 删除header的信息
forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息
使用实例