这个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()。

• 上一篇： 冒泡排序
• 下一篇： PHP计算时间差