了解更多,请关注我的微信公众号:mellong
本周,新的Fetch标准已经登陆Chrome Canary(version 42)。这是我一直在等待的规格之一。用一个简洁的界面确实简化了XMLHttpRequest,并配有内置保证。
所以,给你一些的认识,这里是你目前怎么写一个XMLHttpRequest:
var req = new XMLHttpRequest();req.onload = function () {
console.log(this.responseText);
};
req.open('GET', 'http://someendpoint.com/api/stuff', true);
req.send();
这是一个非常简单的例子,如你所知,它可以在你开始处理错误的情况下得到更多详细的信息。
而现在,这是和window.fetch()进行网络请求一样的,但不一样的是额外增加了错误处理:
window.fetch('http://someendpoint.com/api/stuff').then(function (response) {
return reponse.text();
}).then(function (text) {
console.log(text);
}).catch(function (e) {
console.log(e);
});
在我看了这种写法更简单,而且,这也是定制的:
window.fetch('http://someendpoint.com/api/stuff', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ someField: 1234, anotherField: 'foobar' })
}).then(function (response) {
return reponse.text();
}).then(function (text) {
console.log(text);
}).catch(function (e) {
console.log(e);});
看一看这个规范,这里面还有包括更多的特性。
那么其他浏览器支持吗?
Github上发布了一个Fetch polyfill工具,与所有的浏览器工作得很好(IE9+在内),只要确保你也安装es6-promise
polyfill工具来保证支持旧的浏览器。
翻译源文: http://blog.rogeriopvl.com/archives/simple-xmlhttprequests-with-window.fetch/