JS之Fetch

細節敘述見如下連接：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 });