这个API很“迷人”—— (新的Fetch API)

    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);
});

结果如下:

技苑

如果是提交一个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()。


技苑
请先登录后发表评论
  • 最新评论
  • 总共0条评论
  • © 2016-2020 技苑|PHP是世界上最好的语言 版权所有 ICP证:鄂ICP备15021999号
  • 联系邮箱:master@pengxb.com