h5的fetch方法_这个API很“迷人”——Fetch API

JavaScript 通过XMLHttpRequest(XHR)来执行异步请求，这个方式已经存在了很长一段时间。虽说它很有用，但它不是最佳API。它在设计上不符合职责分离原则，将输入、输出和用事件来跟踪的状态混杂在一个对象里。而且，基于事件的模型与最近JavaScript流行的Promise以及基于生成器的异步编程模型不太搭(事件模型在处理异步上有点过时了——译者注)。

新的 Fetch API打算修正上面提到的那些缺陷。 它向JS中引入和HTTP协议中同样的原语(即Fetch——译者注)。具体而言，它引入一个实用的函数fetch()用来简洁捕捉从网络上检索一个资源的意图。

Fetch 规范的API明确了用户代理获取资源的语义。它结合ServiceWorkers，尝试达到以下优化：

改善离线体验

保持可扩展性

到写这篇文章的时候，Fetch API被Firefox 39(Nightly版)以及Chrome 42(开发版)支持。在github上，有基于低版本浏览器的兼容实现

特性检测

要检查是否支持Fetch API，可以通过检查 Headers, Request, Response 或者 fetch 在 window 或者 worker 作用域中是否存在。

简单的fetching示例

在Fetch API中，最常用的就是fetch()函数。它接收一个URL参数，返回一个promise来处理response。response参数带着一个Response对象。

fetch("/data.json").then(function(res) {

// res instanceof Response == true.

if (res.ok) {res.json().then(function(data) {console.log(data.entries);

});

} else {console.log("Looks like the response wasn't perfect, got status",res.status);

}

}, function(e) {console.log("Fetch failed!",e);

});

如果是提交一个POST请求，代码如下：

fetch("http://www.example.org/submit.php", {method: "POST",headers: {

"Content-Type": "application/x-www-form-urlencoded"

},body: "firstName=Nikhil&favColor=blue&password=easytoguess"

}).then(function(res) {

if (res.ok) {alert("Perfect! Your settings are saved.");

} else if (res.status== 401) {alert("Oops! You are not authorized.");

}

}, function(e) {alert("Error submitting form!");

});

fetch()函数的参数和传给Request()构造函数的参数保持完全一致，所以你可以直接传任意复杂的request请求给fetch()。

Headers

Fetch引入了3个接口，它们分别是 Headers,Request 以及 Response 。他们直接对应了相应的HTTP概念，但是基于安全考虑，有些区别，例如支持CORS规则以及保证cookies不能被第三方获取。

Headers接口是一个简单的多映射的名-值表

varcontent= "Hello World";

varreqHeaders= new Headers();reqHead