摘要：無(wú)論請(qǐng)求成功與否，它都返回一個(gè)對(duì)象，對(duì)應(yīng)請(qǐng)求的?？蛇x一個(gè)配置項(xiàng)對(duì)象，包括所有對(duì)請(qǐng)求的設(shè)置。注意或方法的請(qǐng)求不能包含信息。只讀請(qǐng)求所關(guān)聯(lián)的對(duì)象。使用一個(gè)對(duì)象來(lái)讀取流中的數(shù)據(jù)，并將狀態(tài)改為已使用。

此功能某些瀏覽器尚在開(kāi)發(fā)中，請(qǐng)參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對(duì)應(yīng)的標(biāo)準(zhǔn)文檔可能被重新修訂，所以在未來(lái)版本的瀏覽器中該功能的語(yǔ)法和行為可能隨之改變。

Note: 如果不需要支持落后的IE系列瀏覽器，就可以放心大膽的使用吧！
ps: 當(dāng)然也可以使用第三方的polyfill 庫(kù)！https://github.com/github/fetch

fetch提供了對(duì)于xhr的這種請(qǐng)求中的常見(jiàn)的【請(qǐng)求 Request】、【響應(yīng) Response】?jī)蓚€(gè)對(duì)象的定義，就像node發(fā)起一個(gè)請(qǐng)求或者響應(yīng)一個(gè)請(qǐng)求一樣，創(chuàng)建了request、response兩個(gè)實(shí)例對(duì)象，供使用者獲取整個(gè)請(qǐng)求過(guò)程中的請(qǐng)求和響應(yīng)信息。

它還提供了一種定義，將 CORS 和 HTTP 原生的頭信息結(jié)合起來(lái)，取代了原來(lái)那種分離的定義。

fetch() 必須接受一個(gè)參數(shù)——資源的路徑。無(wú)論請(qǐng)求成功與否，它都返回一個(gè) promise 對(duì)象，resolve 對(duì)應(yīng)請(qǐng)求的 Response。你也可以傳一個(gè)可選的第二個(gè)參數(shù)—— init（參考 Request）。

一旦 Response 被返回，就有一些方法可以使用了，比如定義內(nèi)容或者處理方法（參考 Body）。

你也可以通過(guò) Request() 和 Response() 的構(gòu)造函數(shù)直接創(chuàng)建請(qǐng)求和響應(yīng)，但是我們不建議這么做。他們應(yīng)該被用于創(chuàng)建其他 API 的結(jié)果（比如，service workers 中的 FetchEvent.respondWith）。

參考：https://developer.mozilla.org...
https://developer.mozilla.org...
https://developer.mozilla.org...
在這里可能需要先說(shuō)下fetch方法的定義，其最原始的定義是在一個(gè)接口叫做GlobalFetch，該接口包含了GlobalFetch.fetch() 方法，Window 和WorkerGlobalScope都實(shí)現(xiàn)了GlobalFetch 接口，后來(lái)瀏覽器都把這個(gè)接口作了修改，形成了新的mixin，也就是WorkerOrGlobalScope，繼而演變?yōu)椋篧indowOrWorkerGlobalScope，WindowOrWorkerGlobalScope混入【mixin】 了對(duì) Window 和WorkerGlobalScope 接口的公共特性的描述【包括常見(jiàn)的setInterval、setTimeout等】。顯然除了下文即將列出的之外，這些接口中的每一個(gè)，都可以增加更多的特性。

GlobalFetch =》 WorkerOrGlobalScope =》WindowOrWorkerGlobalScope

Note: WindowOrWorkerGlobalScope 是一個(gè) mixin 而并非 interface。不能創(chuàng)建一個(gè)類型為 WindowOrWorkerGlobalScope 的對(duì)象。

由于 Window 和WorkerGlobalScope都實(shí)現(xiàn)了上述mixin，故而可以放心的在全局域下使用fetch，

Fetch 是一個(gè)現(xiàn)代的概念, 等同于 XMLHttpRequest。它提供了許多與XMLHttpRequest相同的功能，但被設(shè)計(jì)成更具可擴(kuò)展性和高效性。
Fetch 的核心在于對(duì) HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化異步請(qǐng)求的 global fetch。得益于 JavaScript 實(shí)現(xiàn)的這些抽象好的 HTTP 模塊，其他接口能夠很方便的使用這些功能。

Service Workers 是一個(gè)利用了 Fetch 實(shí)現(xiàn)的接口的例子。

除此之外，F(xiàn)etch 還利用到了請(qǐng)求的異步特性——它是基于 Promise 的。

參考：https://developer.mozilla.org...
https://developer.mozilla.org...
這里先給出一個(gè)很簡(jiǎn)單的例子，以上代碼中，我們通過(guò)網(wǎng)絡(luò)獲取了一個(gè)圖片，然后將它插入到一個(gè) 標(biāo)簽中。這個(gè)最簡(jiǎn)單的用法中，fetch() 接受了一個(gè)參數(shù)——請(qǐng)求的地址——然后返回一個(gè)包含 response（一個(gè) Response 對(duì)象）的 promise 對(duì)象。：

var myImage = document.querySelector("img");

fetch("flowers.jpg")
.then(function(response) {
  return response.blob();
})
.then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

這個(gè)例子很簡(jiǎn)單，不過(guò)還是需要先判斷下是否支持fetch：

if(self.fetch) {
    // run my fetch request here
} else {
    // do something with XMLHttpRequest?
}

上面簡(jiǎn)單的例子已經(jīng)包含了response對(duì)象、blob方法、then方法；后面一一簡(jiǎn)述；上面的例子中，fetch函數(shù)只是使用了一個(gè)參數(shù)，也就是url，即獲取數(shù)據(jù)的后段地址，其實(shí)還有第二個(gè)參數(shù) init對(duì)象；

var myHeaders = new Headers();

var myInit = { method: "GET",
               headers: myHeaders,
               mode: "cors",
               cache: "default" };

fetch("flowers.jpg",myInit)
.then(function(response) {
  return response.blob();
})
.then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

經(jīng)過(guò)進(jìn)一步的完善，fetch使用變成了這個(gè)樣子。實(shí)際上fetch的定義是這樣的：

Promise fetch(input[, init]);
//another to write the args of fetch 另一種書(shū)寫(xiě)方式
var myRequest = new Request(input, init);
Promise fetch(myRequest);

參數(shù)的具體介紹：

參數(shù)
input
定義要獲取的資源。這可能是：
一個(gè) USVString 字符串，包含要獲取資源的 URL。一些瀏覽器會(huì)接受 blob: 和 data: 作為 schemes.
一個(gè) Request 對(duì)象。
init 可選
一個(gè)配置項(xiàng)對(duì)象，包括所有對(duì)請(qǐng)求的設(shè)置?？蛇x的參數(shù)有：
method: 請(qǐng)求使用的方法，如 GET、POST。
headers: 請(qǐng)求的頭信息，形式為 Headers 的對(duì)象或包含 ByteString 值的對(duì)象字面量。
body: 請(qǐng)求的 body 信息：可能是一個(gè) Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對(duì)象。注意 GET 或 HEAD 方法的請(qǐng)求不能包含 body 信息。
mode: 請(qǐng)求的模式，如 cors、 no-cors 或者 same-origin。
credentials: 請(qǐng)求的 credentials，如 omit、same-origin 或者 include。為了在當(dāng)前域名內(nèi)自動(dòng)發(fā)送 cookie ， 必須提供這個(gè)選項(xiàng)， 從 Chrome 50 開(kāi)始， 這個(gè)屬性也可以接受 FederatedCredential 實(shí)例或是一個(gè) PasswordCredential 實(shí)例。
cache:  請(qǐng)求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
redirect: 可用的 redirect 模式: follow (自動(dòng)重定向), error (如果產(chǎn)生重定向?qū)⒆詣?dòng)終止并且拋出一個(gè)錯(cuò)誤), 或者 manual (手動(dòng)處理重定向). 在Chrome中，Chrome 47之前的默認(rèn)值是 follow，從 Chrome 47開(kāi)始是 manual。
referrer: 一個(gè) USVString 可以是 no-referrer、client或一個(gè) URL。默認(rèn)是 client。
referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
integrity: 包括請(qǐng)求的  subresource integrity 值 （ 例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。
返回值
一個(gè) Promise，resolve 時(shí)回傳 Response 對(duì)象。

Exceptions
Type    Description
TypeError    Since Firefox 43, fetch() will throw a TypeError if the URL has credentials, such as http://user:password@example.com.

以上可以看到的就是所有的參數(shù)，同樣也是有兩種形式的書(shū)寫(xiě)：

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});
//它的內(nèi)容可以被獲?。?console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false
myHeaders.set("Content-Type", "text/html");
myHeaders.append("X-Custom-Header", "AnotherValue"); //http 頭部信息
var myInit = { method: "GET",
               headers: myHeaders,
               mode: "cors",
               cache: "default" };

fetch("flowers.jpg",myInit)
.then(function(response) {......
//或者使用這個(gè)來(lái)構(gòu)建fetch參數(shù)，所需的參數(shù)和fetch所需的參數(shù)一樣
var anotherRequest = new Request(input,myInit);

其中的頭部有些需要注意，詳情查看：https://developer.mozilla.org... 可以直接使用Headers構(gòu)建新的請(qǐng)求頭，headers是由鍵值對(duì)構(gòu)成，不過(guò)有的請(qǐng)求頭只允許用戶代理做修改，詳情參見(jiàn)：https://developer.mozilla.org...
同時(shí)Guard也是Headers中的重要部分，由于 Headers 可以在 request 請(qǐng)求中被發(fā)送或者在 response 請(qǐng)求中被接收，并且規(guī)定了哪些參數(shù)是可寫(xiě)的，Headers 對(duì)象有一個(gè)特殊的 guard 屬性。這個(gè)屬性沒(méi)有暴露給 Web，但是它影響到哪些內(nèi)容可以在 Headers 對(duì)象中被操作。

可能的值如下：

none：默認(rèn)的

request：從 request 中獲得的 headers（Request.headers）只讀【后端獲取http請(qǐng)求對(duì)象】

request-no-cors：從不同域（Request.mode no-cors）的 request 中獲得的 headers 只讀

response：從 response 中獲得的 headers（Response.headers）只讀

immutable：在 ServiceWorkers 中最常用的，所有的 headers 都只讀
下面分別介紹request、body、response

了解了以上部分后，就知道可以構(gòu)建request來(lái)發(fā)起http請(qǐng)求，

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});
//它的內(nèi)容可以被獲?。?console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false
myHeaders.set("Content-Type", "text/html");
myHeaders.append("X-Custom-Header", "AnotherValue"); //http 頭部信息

//屬性
Request.method 只讀
請(qǐng)求使用的方法 (GET, POST, 等.)
Request.url 只讀
請(qǐng)求使用的 URL。
Request.headers 只讀
請(qǐng)求所關(guān)聯(lián)的 Headers 對(duì)象。
Request.context 只讀  
請(qǐng)求的上下文 例如：(例如：audio, image, iframe, 等)
Request.referrer 只讀
請(qǐng)求的來(lái)源 (例如：client).
Request.mode 只讀
請(qǐng)求的模式 (例如： cors, no-cors, same-origin).
Request.credentials 只讀
請(qǐng)求的憑證 (例如： omit, same-origin).
Request.redirect 只讀
如何處理重定向模式 (例如： follow, error, or manual)
Request.integrity 只讀
請(qǐng)求內(nèi)容的 subresource integrity 值 (例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
Request.cache 只讀
請(qǐng)求的緩存模式 (例如： default, reload, no-cache).
Request implements Body, so it also has the following property available to it:

Body.bodyUsed 只讀
指示body是否被使用， 類型為Boolean

不管是請(qǐng)求還是響應(yīng)都能夠包含body對(duì)象. body也可以是以下任意類型的實(shí)例.

ArrayBuffer
ArrayBufferView (Uint8Array and friends)
Blob/File
string
URLSearchParams
FormData
Body 類定義了以下方法 (這些方法都被 Request 和Response所實(shí)現(xiàn))以獲取body內(nèi)容. 這些方法都會(huì)返回一個(gè)被解析后的promise對(duì)象和數(shù)據(jù).

Body.bodyUsed 只讀
包含一個(gè)指示body是否被讀取過(guò)的 Boolean 值。
方法Edit

Body.arrayBuffer()
使用一個(gè)buffer數(shù)組來(lái)讀取 Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用。
Body.blob()
使用一個(gè)Blob對(duì)象來(lái)讀取 Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用?！径M(jìn)制】
Body.formData()
使用一個(gè) FormData 對(duì)象來(lái)讀取 Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用【表單數(shù)據(jù)】。
Body.json()
使用一個(gè) JSON 對(duì)象來(lái)讀取 Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用【json】。
Body.text()
使用一個(gè)USVString (文本)
clone() 方法The clone() method of the Request interface creates a copy of the current Request object.

clone() throws a TypeError if the response Body has already been used. In fact, the main reason clone() exists is to allow multiple uses of Body objects (when they are one-use only.)

對(duì)象來(lái)讀取 Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用。比起XHR來(lái)，這些方法讓非文本化的數(shù)據(jù)使用起來(lái)更加簡(jiǎn)單，因?yàn)檫@些方法都被 Request 和Response所實(shí)現(xiàn)。

如果遇到網(wǎng)絡(luò)故障，fetch() promise 將會(huì) reject，帶上一個(gè) TypeError 對(duì)象。雖然這個(gè)情況經(jīng)常是遇到了權(quán)限問(wèn)題或類似問(wèn)題——比如 404 不是一個(gè)網(wǎng)絡(luò)故障。想要精確的判斷 fetch() 是否成功，需要包含 promise resolved 的情況，此時(shí)再判斷 Response.ok 是不是為 true。
response的屬性和方法：

Response.type 只讀
包含Response的類型 (例如, basic, cors).
Response.url 只讀
包含Response的URL.
Response.useFinalURL
包含了一個(gè)布爾值來(lái)標(biāo)示這是否是該Response的最終URL.
Response.status 只讀
包含Response的狀態(tài)碼 (例如, 200 成功).
Response.ok 只讀
包含了一個(gè)布爾值來(lái)標(biāo)示該Response成功(狀態(tài)碼200-299) 還是失敗.
Response.statusText 只讀
包含了與該Response狀態(tài)碼一致的狀態(tài)信息 (例如, OK對(duì)應(yīng)200).
Response.headers 只讀
包含此Response所關(guān)聯(lián)的Headers 對(duì)象.
Response 實(shí)現(xiàn)了 Body, 所以以下屬性同樣可用:

Body.bodyUsed 只讀
 包含了一個(gè)布爾值來(lái)標(biāo)示該Response是否讀取過(guò)Body.
Response.clone()
創(chuàng)建一個(gè)Response對(duì)象的克隆
Response.error()
返回一個(gè)綁定了網(wǎng)絡(luò)錯(cuò)誤的新的Response對(duì)象
Response.redirect()
用另一個(gè)URL創(chuàng)建一個(gè)新的 response.
Response 實(shí)現(xiàn)了 Body, 所以以下方法同樣可用