Fetch API学习笔记
Fetch是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能，但被设计成更具可扩展性和高效性。
示例
在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);
});
Fetch引入了3个接口，它们分别是 Headers,Request 以及 Response 。他们直接对应了相应的HTTP概念，但是基于安全考虑，有些区别，例如支持CORS规则以及保证cookies不能被第三方获取。
Headers
Headers接口是一个简单的多映射的名-值表：
var content = "Hello World";
var reqHeaders = new Headers();
reqHeaders.append("Content-Type", "text/plain");
reqHeaders.append("Content-Length", content.length.toString());
reqHeaders.append("X-Custom-Header", "ProcessThisImmediately");
也可以传一个多维数组或者json：
reqHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length": content.length.toString(),
"X-Custom-Header": "ProcessThisImmediately",
});
Headers的内容可以被检索：
console.log(reqHeaders.has("Content-Type")); // true
console.log(reqHeaders.has("Set-Cookie")); // false
reqHeaders.set("Content-Type", "text/html");
reqHeaders.append("X-Custom-Header", "AnotherValue");
console.log(reqHeaders.get("Content-Length")); // 11
console.log(reqHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
reqHeaders.delete("X-Custom-Header");
console.log(reqHeaders.getAll("X-Custom-Header")); // []
Request
Request接口定义了通过HTTP请求资源的request格式。
最简单的 Request 是一个URL，可以通过URL来GET一个资源。
var req = new Request("/index.html");
console.log(req.method); // "GET"
console.log(req.url); // "http://example.com/index.html"
URL以外的其他属性的初始值能够通过第二个参数传给Request构造函数。这个参数是一个json：
var uploadReq = new Request("/uploadImage", {
method: "POST",
headers: {
"Content-Type": "image/png",
},
body: "image data"
});
mode属性用来决定是否允许跨域请求，以及哪些response属性可读?？裳〉?code>mode属性值为same-origin，no-cors（默认）以及cors。
-
same-origin模式：如果一个请求是跨域的，那么返回一个简单的error，这样确保所有的请求遵守同源策略。 -
no-cors模式允许来自CDN的脚本、其他域的图片和其他一些跨域资源，但是首先有个前提条件，就是请求的method只能是HEAD,GET或者POST。 -
cors模式我们通常用作跨域请求来从第三方提供的API获取数据。
Response
Response实例通常在fetch()的回调中获得。
Response中最常见的成员:
-
status：默认值为200 -
status Text：默认值为OK -
ok：当status为2xx时它的值为true
这篇学习笔记参考这个API很“迷人”——(新的Fetch API))，有的部分没有立即理解，留待实践之后回头补充。
