基本用法

Ajax 操作使用的XMLHttpRequest对象，已经有十多年的历史了，它的API设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。Fetch API 是一种新规范，用来取代XMLHttpRequest对象。

它主要有两个特点，一是接口合理化，Ajax 将所有不同性质的接口都放在 XHR 对象上，而 Fetch 将它们分散在几个不同的对象上，设计更合理；二是 Fetch 操作返回Promise对象，避免了嵌套的回调函数。

下面的代码检查浏览器是否部署了 Fetch API。

if ('fetch' in window){
  // 支持
} else {
  // 不支持
}

下面是一个 Fetch API 的简单例子。

fetch(url)
.then(function (response) {
  return response.json();
})
.then(function (jsonData) {
  console.log(jsonData);
})
.catch(function () {
  console.log('出错了');
});

上面代码首先向url发出请求，得到回应后，将其转为 JSON 格式，输出到控制台。如果出错，则输出一条提示信息。这里需要注意，fetch方法返回的是一个 Promise 对象。

作为比较，XMLHttpRequest的写法如下。

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function() {
  console.log(xhr.response);
};
xhr.onerror = function() {
  console.log('出错了');
};
xhr.send();