Fetch API

Fetch API

Fetch API 旨在用來簡化 HTTP 請求，它包含如下類和方法：

• fetch 方法：用於發起 HTTP 請求

• Request 類：用來描述請求

• Response 類：用來表示響應

• Headers 類：用來表示 HTTP 頭部信息

基本用法

fetch 方法接受一個表示 url 的字符串或者 一個 Request 對象做爲參數，返回 Promise 對象。請求成功後將結果封裝爲 Response 對象。Response 對象上具備 json、text 等方法，調用這些方法後能夠得到不一樣類型的結果。Response 對象上的這些方法一樣返回 Promise 對象。

所以基本的使用方法以下：

// 發起請求
fetch('https://api.github.com/repos/facebook/react').then(function(res){
    // 請求成功，獲得 response 對象，調用 response 對象的 json 方法並返回
    return res.json();
}).then(function(data){
    // response 對象的 json 方法執行成功，獲得結果
    console.log(data)
});

更多高級用法和配置，詳見下面介紹。

fetch 方法

fetch 方法的第一個參數能夠是 Request 對象，也能夠是一個 url，第二個參數可選，包含一些配置信息。fetch 方法返回 Promise。

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：請求的模式，常見取值以下：

  • same-origin：只容許同源的請求，不然直接報錯

  • cors：容許跨域，但要求響應中包含 Access-Control-Allow-* 這類表示 CORS 的頭部信息，且響應中只有部分頭部信息（ Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma）能夠讀取，但響應內容能夠不受限地讀取。

  • no-cors：容許跨域請求那些響應中沒有包含 CORS 頭信息的域，可是響應內容是不可讀取的。使用使用這種模式配合 ServiceWorkers 能夠實現預加載一些資源。

• credentials：表示是否發送 cookie，有三個可選值 omit, same-origin, include

  • omit：不發生 cookie

  • same-origin： 僅在同源時發生 cookie

  • include：發送 cookie

• cache：表示處理緩存的策略，可選值爲 default、no-store、reload、no-cache、force-cache、only-if-cached，關於此能夠參考https://fetch.spec.whatwg.org

• redirect：發生重定向時候的策略。有如下可選值：

  • follow：跟隨

  • error：發生錯誤

  • manual：須要用戶手動跟隨

• referrer： 一個字符串，能夠是 no-referrer, client, 或者是一個 URL。默認值是 client。

• integrity：包含一個用於驗證子資源完整性的字符串。關於此，能夠參看 Subresource Integrity 介紹

該函數返回一個 Promise 對象，若請求成功會用 Response 的實例做爲參數調用 resolve ，若請求失敗會用一個錯誤對象來調用 reject。

Headers 類

Headers 類用來表示 HTTP 的頭部信息，其構造函數能夠接受一個表示 HTTP 頭信息的對象，也能夠接受一個 Headers 類的實例做爲對象：

var header = new Headers({
  'Content-Type': 'image/jpeg',
  'Accept-Charset': 'utf-8'
});

var anotherHeader = new Headers(header);

Headers 實例的方法

append

對一個字段追加信息，若是該字段不存在，就建立一個。

var header = new Headers();
header.append('Accept-Encoding', 'deflate');
header.append('Accept-Encoding', 'gzip');
// 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：代表了響應的類型，多是下面幾種值：

  • basic： 同源

  • cors：跨域

  • error：出錯

  • opaque：Request 的 mode 設置爲 no-cors 的時候響應式不透明瞭，這個時候 type 爲 opaque

• url：響應的地址

Response 實例的方法

• clone：複製一個響應對象

要想從 Response 的實例中拿到最終的數據須要調用下面這些方法，這些方法都返回一個 Promise 而且使用對應的數據類型來 resolve。

• arrayBuffer：把響應數據轉化爲 arrayBuffer 來 resolve

• blob：把響應數據轉換爲 Blob 來 resolve

• formData：把響應數據轉化爲 formData 來 resolve

• json：把響應數據解析爲對象後 resolve

• text：把響應數據當作字符串來調用 resolve

總結

最後在把上面使用例子進行一個細緻的說明：

// 構造出 Request 對象
var req = new Request('https://api.github.com/repos/facebook/react',{
  method:'GET'
});

// 發起請求，fetch 方法返回一個 Promise 對象
fetch(req).then(function(res){
  // 獲得了 response，這裏調用 response 的 json 方法
  // 該方法一樣返回一個 Promise
  return res.json();
}).then(function(data){
  // 獲得解析後的對象
  console.log(data.stargazers_count)
});

能夠看出 fetch 方法使用起來比 XMLHttpRequest 要方便的多，關於其兼容性，能夠參考 這裏，對於不兼容的瀏覽器，你可使用 polyfill。