兼容性
在引见之前，先看看现在主流浏览器对 Fetch API 的支撑状况：
Fetch 的支撑现在还处于初期的阶段，在 Firefox 39 以上，和 Chrome 42 以上都被支撑了。
假如你如今就想运用它，还能够用 Fetch Polyfil，用于支撑那些还未支撑 Fetch 的浏览器。
在运用 Fetch 之前，也能够对其举行功能性检测：
if(self.fetch) {
// run my fetch request here
} else {
// do something with
XMLHttpRequest?
}
简朴的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);
});
fetch() 接收第二个可选参数，一个能够掌握差别设置的 init 对象。假如是提交一个 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) {
//res.ok用于检测要求是不是胜利
console.log("Perfect! Your settings are
saved.");
} else if (res.status == 401) {
console.log("Oops! You are not
authorized.");
}
}, function(e) {
console.log("Error submitting
form!");
});
假如碰到网络故障，fetch() promise 将会 reject，带上一个 TypeError 对象。想要准确的推断 fetch() 是不是胜利，须要包含 promise resolved 的状况，此时再推断 Response.ok 是不是是为 true。
Fetch 完成了四个接口：GlobalFetch、Headers、Request 和 Response。GloabaFetch 就只包含了一个 fetch 要领用于猎取网络资本，别的三个直接对应了相应的 HTTP 观点。另外，在 request/reponse 中，还殽杂了 Body。
Headers
Headers 接口许可定义 HTTP 的要求头(Request.headers)和相应头(Response.headers)。一个 Headers 对象是一个简朴的多名值对：
var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type",
"text/plain");
myHeaders.append("Content-Length",
content.length.toString());
myHeaders.append("X-Custom-Header",
"ProcessThisImmediately");
也能够传一个多维数组或许对象字面量：
myHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length":
content.length.toString(),
"X-Custom-Header":
"ProcessThisImmediately",
});
另外，Headers 接口供应了 set ，delete 等 API 用于检索其内容：
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")); //
[]
虽然有些操纵仅在 ServiceWorkers 中运用，但相对于 XHR，其自身供应了非常轻易的操纵 Headers 的 API。
出于平安缘由，有些 header 字段的设置仅能经由过程 User Agent 完成，不能经由过程编程设置：要求头禁置字段 和 相应头禁置字段。
假如运用了一个不合法的 HTTP Header 属性名或许写入一个不可写的属性，Headers 的要领一般都抛出 TypeError 非常：
var myResponse = Response.error();
try {
myResponse.headers.set("Origin",
"http://mybank.com");
} catch(e) {
console.log("Cannot pretend to be a
bank!");
}
最好实践是在运用之前搜检 content type 是不是准确，比方：
fetch(myRequest).then(function(response)
{
if(response.headers.get("content-type") ===
"application/json") {
return response.json().then(function(json)
{
// process your JSON further
});
} else {
console.log("Oops, we haven't got
JSON!");
}
});
因为 Headers 能够在 request 要求中被发送或许在 response 要求中被吸收，而且划定了哪些参数是可写的，Headers 对象有一个特别的 guard 属性。这个属性没有暴露给 Web，然则它影响到哪些内容能够在 Headers 对象中被转变。
能够的值以下：
none：默许的
r
equest：从 request 中取得的 headers（Request.headers）只读 request-no-cors：从差别域（Request.mode no-cors）的 request 中取得的 headers 只读 response：从 response 中取得的 headers（Response.headers）只读 immutable：在 ServiceWorkers 中最经常使用的，一切的 headers 都只读
Request
Request 接口定义了经由过程HTTP要求资本的request花样，一个简朴要求组织以下：
var req = new
Request("/index.html");
console.log(req.method); // "GET"
console.log(req.url); //
"http://example.com/index.html"
console.log(req.headers);
//要求头
和 fetch() 一样，Request 接收第二个可选参数，一个能够掌握差别设置的 init 对象：
var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' ,
credentials: true,
body: "image data"};
var myRequest = new
Request('flowers.jpg',myInit);
fetch(myRequest,myInit)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL =
URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
mode 属性用来决议是不是许可跨域要求，以及哪些response 属性可读。mode 可选的属性值：
same-origin：要求遵照同源战略
no-cors: 默许值，许可来自CDN的剧本、其他域的图片和其他一些跨域资本（前提条件是 method 只能是HEAD,GET或许POST）
cors ：许可跨域，要求遵照 CROS协定
credentials 罗列属性决议了cookies 是不是能跨域获得，这与 XHR 的 withCredentials 标志雷同，然则只要三个值，分别是omit（默许）,same-origin以及include。
Response
Response 实例是在 fentch() 处置惩罚完 promises 以后返回的，它的实例也可用经由过程 JavaScript 来建立, 但只要在 ServiceWorkers 中才真正有效。当运用 respondWith() 要领并供应了一个自定义的response来接收request时:
var myBody = new Blob();
addEventListener('fetch', function(event)
{
event.respondWith(new Response(myBody,
{
headers: { "Content-Type" : "text/plain"
}
});
});
Response() 组织要领接收两个可选参数—response的数据体和一个初始化对象(与 Request() 所接收的init参数相似.)
最常见的response属性有:
Response.status — 整数(默许值为200) 为response的状况码. Response.statusText — 字符串(默许值为OK),该值与HTTP状况码音讯对应. Response.ok — 如上所示, 该属性是来搜检response的状况是不是在200-299(包含200,299)这个范围内.该属性返回一个Boolean值. Response.headers — 相应头 Response.type — 相应范例，如：basic/ cors /error
Body
Request 和 Response 都完成了 Body 接口，在要求过程当中，两者都邑照顾 Body，其能够是以下任何一种范例的实例：
ArrayBuffer ArrayBufferView Blob/file URLSearchParams FormData
另外，Request 和 Response 都为他们的body供应了以下要领，这些要领都返回一个Promise对象:
arrayBuffer() blob() json() text() formData()
以上就是XML Http Request最新替换手艺—— Fetch 的内容，更多相关内容请关注ki4网（www.ki4.cn）！
