Fetch API提供了一个获取资源的接口。
Basic Fetch
提到获取资源大家都会想到 XHR（XMLHttpRequest），以及通过这个接口实现的Ajax。这是传统的获取数据请求资源的方法。XMLHttpRequest并不是一个最完美的API，配置和调用显得有点混乱，加上是基于事件的异步模型，也没有现在的promise，async/await优雅。Fetch的出现就是为了解决这个问题，看一下使用传统XHR和Fetch分别请求数据的写法：
XHR：
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} /*else if (window.ActiveXObject) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE5-IE6
*/}
xmlhttp.open('Get', url, true);
xmlhttp.responseType = 'json';
//进度xmlhttprequest level2
//xmlhttp.addEventListener("progress", updateProgress, false);
//完成
xmlhttp.addEventListener("load",handleComplete, false);
//失败
xmlhttp.addEventListener("error", handleFailed, false);
xmlhttp.send();
Fetch API:
fetch('/users.json') .then( function (response) {
return response.json();
}).then(function (json) {
console.log('parsed json', json) ;
}).catch(function(ex) {
console.log('parsing failed', ex)
});
Fetch API使用 Javascript Promises 来处理返回值或者是回调。如果你没用使用过promise，就去学咯，因为很快他就会随处可见了。
Fetch Usage
Fetch Header 允许通过执行new Header() 来灵活的设置一个请求头Header：
var head = new Headers();
//add new
head.append('Content-Type', 'text/xml');
head.append('X-My-Custom-Header', 'CustomValue');
//has, get,set,delete,initial
head.get('Content-Type'); // text/xml
head.set('Content-Type', 'text/xml');
.....
你也可以在一个Request实例中使用Header：
var request = new Request(url, {
headers: new Headers({
'Content-Type': 'text/xml'
})
});
fetch(request).then(function() {
// handle response
});
Fetch Request可以通过Fetch Request来发送一个请求Request：
var request = new Request(url, {
method: 'post',
mode: 'cors',
redirect: 'follow',
headers: new Headers({
'Content-Type': 'text-plain'
})
});
fetch(request).then(function() {
//handle response
})
Fetch Response Fetch 的 then 方法提供了一个 response实例，你可以手动创建一个Response，但是更多情况下是作为另一个API调用的返回结果。比如 Service Worker 的 Fetchevent.responseWith 或者是简单的Fetch API调用。 Response:
var response = new Response('....', {
ok: false,
status: 404,
url: '/'
});
fetch('/')
.then(funcyion(responseObject) {
console.log('status: ', responseObject.status);
});
fetch支持所有的 HTTP 方法，可以处理JSON，HTML，二进制返回值，比如：
处理JSON
fetch('/user.json')
.then(function(response) {
return response.json();
}).then(function(json) {
console.log('parsed json', json);
}).catch(function(ex) {
console.log('parsing failed', ex);
});
发送表单
fetch('/submit-json', {
method: 'post',
body: JSON.stringify({
email: document.getElementById('email').value,
answer: document.getElementById('answer').value
})
});
注意
1.Fetch请求默认不带cookie，但是这可以通过 fetch(url, {credentials: 'same-origin'})设置同域，fetch(url, {credentials: 'include'})设置跨域。
2.服务器返回错误码的时候并不会reject，只有发生网络错误，或者是请求拦截的时候会reject。
fetch是一个优雅的资源获取方案。也是一个正在研究中的方案，目前的原生支持率并不高，使用起来很麻烦，幸运的是目前开源了许多的polyfill，引入之后IE9以上都可以完美支持。比如：github/fetch，除此之外还有 fetch-jsonp， fetch-ie8等polyfill，引入之后基本可以在IE8以上的生产环境使用。
扩展阅读
