JavaScript 通过XMLHttpRequest(XHR)来执行异步请求,这个方式已经存在了很长一段时间。虽说它很有用,但它不是最佳API。它在设计上不符合职责分离原则,将输入、输出和用事件来跟踪的状态混杂在一个对象里。而且,基于事件的模型与最近JavaScript流行的Promise以及基于生成器的异步编程模型不太搭(事件模型在处理异步上有点过时了)。
新的Fetch API打算修正上面提到的那些缺陷。 它向JS中引入和HTTP协议中同样的原语(即Fetch)。具体而言,它引入一个实用的函数fetch()
用来简洁捕捉从网络上检索一个资源的意图。
Fetch 规范的API明确了用户代理获取资源的语义。它结合ServiceWorkers,尝试达到以下优化:
1.保持可扩展性
2.改善离线体验
到写这篇文章的时候,Fetch API被Firefox 39(Nightly版)以及Chrome 42(开发版)支持。在github上,有基于低版本浏览器的兼容实现。
特性检测
要检查是否支持Fetch API,可以通过检查 Headers, Request, Response 或者 fetch 在 window 或者 worker 作用域中是否存在。
简单的fetch示例
在Fetch API中,最常用的就是fetch()函数。它接收一个URL参数,返回一个promise来处理response。response参数带着一个Response对象。
fetch('http://api.jirengu.com/weather.php').then(function(res){
console.log(res);
if (res.ok) {
res.json().then(function(data){
res = data.results[0];
console.log(res);
});
} else{
console.log(res.status);
};
},function(e){
console.log('fetch failed',e);
});
结果如下:
![技苑 技苑](https://i-blog.csdnimg.cn/blog_migrate/29e561624bb094cab17c193a01bed82c.png)
如果是提交一个POST请求,代码如下:
fetch('http://api.jirengu.com/weather.php',{method:'POST'}).then(function(res){
console.log(res);
if (res.ok) {
res.json().then(function(data){
res = data.results[0];
console.log(res);
});
} else{
console.log(res.status);
};
},function(e){
console.log('fetch failed',e);
});
结果和上图一样。
fetch()函数的参数和传给Request()构造函数的参数保持完全一致,所以你可以直接传任意复杂的request请求给fetch()。