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

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

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

fetch提供了對于xhr的這種請求中的常見的【請求 Request】、【響應(yīng) Response】兩個對象的定義，就像node發(fā)起一個請求或者響應(yīng)一個請求一樣，創(chuàng)建了request、response兩個實例對象，供使用者獲取整個請求過程中的請求和響應(yīng)信息。

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

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

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

你也可以通過 Request() 和 Response() 的構(gòu)造函數(shù)直接創(chuà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...
在這里可能需要先說下fetch方法的定義，其最原始的定義是在一個接口叫做GlobalFetch，該接口包含了GlobalFetch.fetch() 方法，Window 和WorkerGlobalScope都實現(xiàn)了GlobalFetch 接口，后來瀏覽器都把這個接口作了修改，形成了新的mixin，也就是WorkerOrGlobalScope，繼而演變?yōu)椋篧indowOrWorkerGlobalScope，WindowOrWorkerGlobalScope混入【mixin】 了對 Window 和WorkerGlobalScope 接口的公共特性的描述【包括常見的setInterval、setTimeout等】。顯然除了下文即將列出的之外，這些接口中的每一個，都可以增加更多的特性。

GlobalFetch =》 WorkerOrGlobalScope =》WindowOrWorkerGlobalScope

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

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

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

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

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

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

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;
});

這個例子很簡單，不過還是需要先判斷下是否支持fetch：

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

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

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)過進(jìn)一步的完善，fetch使用變成了這個樣子。實際上fetch的定義是這樣的：

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

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

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

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ù)，同樣也是有兩種形式的書寫：

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òu)建fetch參數(shù)，所需的參數(shù)和fetch所需的參數(shù)一樣
var anotherRequest = new Request(input,myInit);

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

可能的值如下：

none：默認(rèn)的

request：從 request 中獲得的 headers（Request.headers）只讀【后端獲取http請求對象】

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

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

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

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

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

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

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

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

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

Body.arrayBuffer()
使用一個buffer數(shù)組來讀取 Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用。
Body.blob()
使用一個Blob對象來讀取 Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用。【二進(jìn)制】
Body.formData()
使用一個 FormData 對象來讀取 Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用【表單數(shù)據(jù)】。
Body.json()
使用一個 JSON 對象來讀取 Response流中的數(shù)據(jù)，并將bodyUsed狀態(tài)改為已使用【json】。
Body.text()
使用一個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.)

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

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

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

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