細節敘述見以下鏈接：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
1 基本概念：
WindowOrWorkerGlobalScope.fetch()用於獲取資源的方法。
Headers表示響應/請求標頭，允許您查詢它們並根據結果采取不同的操作。
Request表示資源請求。
Response表示對請求的響應。
2. Fetch API
Fetch API 包含一組類和方法，用來簡化 HTTP 請求。其中包含以下方法和類：
- fetch 方法：用於發起 HTTP 請求
- Request 類：用來描述請求
- Response 類：用來表示響應
- Headers 類：用來表示 HTTP 頭部信息。
基本用法
fetch 接受一個 url 作為參數，發起 GET 請求，返回 Promise ,請求成功后將返回結果封裝為一個 Response 對象，該對象上具有一些方法（比如 json 方法），調用 json 方法后同樣返回一個 Promise 對象，並用解析 json 字符串得到的對象來 resolve。
1 fetch('https://api.github.com/repos/facebook/react').then(function(res){ 2 return res.json(); 3 }).then(function(data){ 4 console.log(data) 5 });
fetch 方法
fetch 方法有兩種調用方法，第一個參數可以是一個 Request 對象，也可以是一個簡單的 url，第二個參數是可選參數，包含一些配置信息。
Promise fetch(String url [, Object options]);
Promise fetch(Request req [, Object options]);
可選的配置信息可以一個簡單對象，可以包含下列字段：
- method: 請求的方法, 比如： GET, POST
- headers：請求頭部信息，可以是一個 Headers 對象的實例，也可以是一個簡單對象
- body: 任何希望發送的信息，可以是 Blob, BufferSource, FormData, URLSearchParams, 或者 USVString。需要注意的是 GET 和 HEAD 方法不能包含 body。
- mode：請求的模式，可以取這幾個值：cors, no-cors, same-origin, navigate
- same-origin：只允許同源的請求，否則直接報錯
- cors：允許跨域，但也要要求響應中 Access-Control-Allow-Origin 這樣的頭部信息表示允許跨域，響應中只有部分頭部信息可以讀取，但響應內容可以不受限地讀取。
- no-cors：只允許使用 HEAD、 GET 和 POST 方法，且 JavaScript 不允許訪問 response 中的內容。ServiceWorkers 攔截了這些請求，它不能隨意添加或者改寫任何headers。
- navigate：用於支持頁面導航。通常使用不到。
- credentials：表示是否發送 cookie，有三個可選值 omit, same-origin, includecache：表示處理緩存的策略，關於此可以參考 https://fetch.spec.whatwg.org
- omit：不發生 cookie
- same-origin： 僅在同源時發生 cookie
- include：發送 cookie
- redirect：發生重定向時候的策略。有以下可選值：referrer： 一個字符串，可以是 no-referrer, client, 或者是一個 URL。默認值是 client。
- follow：跟隨
- error：發生錯誤
- manual：需要用戶手動跟隨
- integrity：包含一個用於驗證子資源完整性的字符串。關於此，可以參看 Subresource Integrity 介紹
該函數返回一個 Promise 對象，若請求成功會用 Response 的實例作為參數調用 resolve ，若請求失敗會用一個錯誤對象來調用 reject。
Headers 類
Headers 類用來表示 HTTP 的頭部信息，其構造函數可以接受一個表示 HTTP 頭信息的對象，也可以接受一個 Headers 類的實例作為對象：
1 var header1 = new Headers({ 2 'Content-Type': 'image/jpeg', 3 'Accept-Charset': 'utf-8'
4 }); 5
6 var header2 = new Headers(header1);
Headers 實例的方法
append
對一個字段追加信息，如果該字段不存在，就創建一個。
1 var header = new Headers(); 2 header.append('Accept-Encoding', 'deflate'); 3 header.append('Accept-Encoding', 'gzip'); 4 // Accept-Encoding: ['deflate', 'gzip']
delete
刪除某個字段
get
獲得某個字段的第一個值
var header = new Headers(); header.append('Accept-Encoding', 'deflate'); header.append('Accept-Encoding', 'gzip'); header.get('Accept-Encoding'); //=> 'deflate'
getAll
獲得某個字段所有的值
var header = new Headers(); header.append('Accept-Encoding', 'deflate'); header.append('Accept-Encoding', 'gzip'); header.getAll('Accept-Encoding'); //=> ['deflate', 'gzip']
has
判斷是否存在某個字段
set
設置一個字段，如果該字段已經存在，那么會覆蓋之前的。
forEach
遍歷所有的字段，接受一個回調函數，和可選的第二個參數。可選的第二個參數地值作為回調函數的 this 值。
var header = new Headers(); header.append('Accept-Encoding', 'deflate'); header.forEach(function(value, name, header){ //...
},this);
Request 類
Request 對象用於描述請求內容。構造函數接受的參數和 fetch 函數的參數形式一樣，實際上 fetch 方法會使用傳入的參數構造出一個 Request 對象來。
下面例子從 github 抓取到 react 的 star 數並打印出來。
var req = new Request('https://api.github.com/repos/facebook/react',{ method:'GET' }); fetch(req).then(function(res){ return res.json() }).then(function(data){ console.log(data.stargazers_count) });
Request 實例的屬性
以下屬性均為只讀屬性。這些屬性的意義均在上面介紹 fetch 的參數的時候有過說明。
- method
- url
- headers
- referrer
- referrerPolicy：處理來源信息的策略，關於此可以參見Referrer Policy
- mode
- credentials
- redirect
- integrity
- cache
Response 類
Response 用來表示 HTTP 請求的響應。其構造函數形式如下：
var res = new Response(body, init);
其中 body 可以是：
- Blob
- BufferSource
- FormData
- URLSearchParams
- USVString
init 是一個對象，其中包括以下字段：
- status：響應的狀態碼，比如 200，404
- statusText：狀態信息，比如 OK
- headers: 頭部信息，可以是一個對象，也可以是一個 Headers 實例
Response 實例屬性
以下屬性均為只讀屬性
- bodyUsed：用於表示響應內容是否有被使用過
- headers：頭部信息
- ok：表明請求是否成功，當響應的狀態碼是 200~299 時，該值為 true
- status：狀態碼
- statusText：狀態信息
- type：表明了響應的類型，可能是下面幾種值：url：響應的地址
- basic： 同源
- cors：跨域
- error：出錯
- opaque：Request 的 mode 設置為 “no-cors” 的響應
方法
- clone：復制一個響應對象
要想從 Response 的實例中拿到最終的數據需要調用下面這些方法，這些方法都返回一個 Promise 並且使用對應的數據類型來 resolve。
- arrayBuffer：把響應數據轉化為 arrayBuffer 來 resolve
- blob：把響應數據轉換為 Blob 來 resolve
- formData：把響應數據轉化為 formData 來 resolve
- json：把響應數據解析為對象后 resolve
- text：把響應數據當做字符串來調用 resolve
總結
最后在把上面使用例子進行一個細致的說明：
1 // 構造出 Request 對象
2 var req = new Request('https://api.github.com/repos/facebook/react',{ 3 method:'GET'
4 }); 5
6 // 發起請求，fetch 方法返回一個 Promise 對象
7 fetch(req).then(function(res){ 8 // 得到了 response，這里調用 response 的 json 方法
9 // 該方法同樣返回一個 Promise
10 return res.json(); 11 }).then(function(data){ 12 // 得到解析后的對象
13 console.log(data.stargazers_count) 14 });