长久以来，我们一直都通过XMLHttpRequest(XHR)来执行异步请求，但它有很多缺陷与不便之处，W3C官方则推出了新的api Fetch来替换它。

XMLHttpRequest的缺陷

先看一个典型的XHR例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function() {
  console.log(xhr.response);
};
xhr.onerror = function() {
  console.log("Booo");
};
xhr.send();

可以看出，XHR是基于事件的异步模型，在设计上不符合分离原则，输入、输出和用事件来跟踪的状态混杂在一个对象里。我们必须创建实例来发送请求。相比于ES6发布的Promise，Generator，基于事件的模型是非常落后难用的。

Fetch Api的特点

fetch api是基于Promise设计的，定义在BOM的window对象之中。建议阅读资料：

caniuse-fetch

截止到2016年8月，Chrome43+，Firefox47+支持fetch api，对于低版本的浏览器，github上有许多polyfill可以使其兼容。

一个典型的fetch例子：

1
2
3
4
5
6
7
fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function() {
  console.log("Booo");
});

用ES6的箭头函数重构之后：

1
2
3
fetch(url).then(r => r.json())
  .then(data => console.log(data))
  .catch(e => console.log("Booo"))

用还处于草案阶段的ES7的async函数再重构一下：

1
2
3
4
5
6
7
8
9
(async() => {
  try {
    var response = await fetch(url);
    var data = await response.json();
    console.log(data);
  } catch (e) {
    console.log("Booo")
  }
})();

就可以把一个异步的请求代码结构写得看起来跟同步请求差不多了。

由此可见，Fetch基于Promise实现，支持async/await，语法更简洁。

How to Use

fetch()

语法：

1
fetch(input, init).then(function(response) { ... });

参数：

  • input :要获取的资源
    • 字符串，资源的url
    • 一个Request对象（后面会介绍Request)
  • init :可选，是请求的配置项
    • method: 请求方式，GET/POST/PUT/DELETE等等
    • headers: 请求头，可能是Headers 对象或者 ByteString
    • body: 请求的Body信息
    • mode: 请求的模式，cors/no-cors/same-origin
    • credentials: 请求的credentials，omit/same-origin/include
    • cache: 请求的缓存模式， default/no-store/reload/ no-cache/force-cache/only-if-cached

返回值：返回一个Promise对象

Fetch引入了3个接口，它们分别是 Headers,Request 以及 Response 。

Headers()

Headers()是一个可检索的多映射名值表，也可穿多维数组或者json

1
2
3
4
5
6
7
var reqHeaders = new Headers();
reqHeaders = new Headers({
  "Content-Length": content.length.toString(),
});
reqHeaders.append("Content-Type", "text/plain");
console.log(reqHeaders.has("Content-Type")); // true
console.log(reqHeaders.has("Set-Cookie")); // false

Headers()有一个guard属性来规定哪些参数是可写的。

Requset()

语法，参数与fetch()类似：

var myRequest = new Request(input, init);

其中可选的init配置项比fetch()多了几项(redirect/integrity/referrer)

Response()

在fetch()的回调中我们可以获得一个Response实例。Response有很多实用的只读属性，比如Response.ok/Response.type/Response.headers等等。

参考内容