摘要：無論請求成功與否，它都返回一個對象，對應請求的。可選一個配置項對象，包括所有對請求的設置。注意或方法的請求不能包含信息。只讀請求所關聯的對象。使用一個對象來讀取流中的數據，并將狀態改為已使用。

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

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

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

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

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

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

你也可以通過 Request() 和 Response() 的構造函數直接創建請求和響應，但是我們不建議這么做。他們應該被用于創建其他 API 的結果（比如，service workers 中的 FetchEvent.respondWith）。

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

GlobalFetch =》 WorkerOrGlobalScope =》WindowOrWorkerGlobalScope

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

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

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

Service Workers 是一個利用了 Fetch 實現的接口的例子。

除此之外，Fetch 還利用到了請求的異步特性——它是基于 Promise 的。

參考：https://developer.mozilla.org...
https://developer.mozilla.org...
這里先給出一個很簡單的例子，以上代碼中，我們通過網絡獲取了一個圖片，然后將它插入到一個 標簽中。這個最簡單的用法中，fetch() 接受了一個參數——請求的地址——然后返回一個包含 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?
}

上面簡單的例子已經包含了response對象、blob方法、then方法；后面一一簡述；上面的例子中，fetch函數只是使用了一個參數，也就是url，即獲取數據的后段地址，其實還有第二個參數 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;
});

經過進一步的完善，fetch使用變成了這個樣子。實際上fetch的定義是這樣的：

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

參數的具體介紹：

參數
input
定義要獲取的資源。這可能是：
一個 USVString 字符串，包含要獲取資源的 URL。一些瀏覽器會接受 blob: 和 data: 作為 schemes.
一個 Request 對象。
init 可選
一個配置項對象，包括所有對請求的設置。可選的參數有：
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。為了在當前域名內自動發送 cookie ， 必須提供這個選項， 從 Chrome 50 開始， 這個屬性也可以接受 FederatedCredential 實例或是一個 PasswordCredential 實例。
cache:  請求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
redirect: 可用的 redirect 模式: follow (自動重定向), error (如果產生重定向將自動終止并且拋出一個錯誤), 或者 manual (手動處理重定向). 在Chrome中，Chrome 47之前的默認值是 follow，從 Chrome 47開始是 manual。
referrer: 一個 USVString 可以是 no-referrer、client或一個 URL。默認是 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.

以上可以看到的就是所有的參數，同樣也是有兩種形式的書寫：

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});
//它的內容可以被獲取：
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) {......
//或者使用這個來構建fetch參數，所需的參數和fetch所需的參數一樣
var anotherRequest = new Request(input,myInit);

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

可能的值如下：

none：默認的

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

了解了以上部分后，就知道可以構建request來發起http請求，

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});
//它的內容可以被獲取：
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 只讀
請求所關聯的 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 只讀
請求內容的 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

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

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

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

Body.arrayBuffer()
使用一個buffer數組來讀取 Response流中的數據，并將bodyUsed狀態改為已使用。
Body.blob()
使用一個Blob對象來讀取 Response流中的數據，并將bodyUsed狀態改為已使用。【二進制】
Body.formData()
使用一個 FormData 對象來讀取 Response流中的數據，并將bodyUsed狀態改為已使用【表單數據】。
Body.json()
使用一個 JSON 對象來讀取 Response流中的數據，并將bodyUsed狀態改為已使用【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流中的數據，并將bodyUsed狀態改為已使用。比起XHR來，這些方法讓非文本化的數據使用起來更加簡單，因為這些方法都被 Request 和Response所實現。

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

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

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