Fetch API

AJie 發(fā)布于2019-08-21 10:55 / 434人閱讀

摘要：遍歷所有的字段，接受一個(gè)回調(diào)函數(shù)，和可選的第二個(gè)參數(shù)。構(gòu)造函數(shù)接受的參數(shù)和函數(shù)的參數(shù)形式一樣，實(shí)際上方法會(huì)使用傳入的參數(shù)構(gòu)造出一個(gè)對(duì)象來(lái)。

Fetch API

Fetch API 旨在用來(lái)簡(jiǎn)化 HTTP 請(qǐng)求，它包含以下類和方法：

fetch 方法：用于發(fā)起 HTTP 請(qǐng)求

Request 類：用來(lái)描述請(qǐng)求

Response 類：用來(lái)表示響應(yīng)

Headers 類：用來(lái)表示 HTTP 頭部信息

基本用法

fetch 方法接受一個(gè)表示 url 的字符串或者一個(gè) Request 對(duì)象作為參數(shù)，返回 Promise 對(duì)象。請(qǐng)求成功后將結(jié)果封裝為 Response 對(duì)象。Response 對(duì)象上具有 json、text 等方法，調(diào)用這些方法后可以獲得不同類型的結(jié)果。Response 對(duì)象上的這些方法同樣返回 Promise 對(duì)象。

因此基本的使用方法如下：

// 發(fā)起請(qǐng)求
fetch("https://api.github.com/repos/facebook/react").then(function(res){
    // 請(qǐng)求成功，得到 response 對(duì)象，調(diào)用 response 對(duì)象的 json 方法并返回
    return res.json();
}).then(function(data){
    // response 對(duì)象的 json 方法執(zhí)行成功，得到結(jié)果
    console.log(data)
});

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

fetch 方法

fetch 方法的第一個(gè)參數(shù)可以是 Request 對(duì)象，也可以是一個(gè) url，第二個(gè)參數(shù)可選，包含一些配置信息。fetch 方法返回 Promise。

Promise fetch(String url [, Object options]);
Promise fetch(Request req [, Object options]);

配置信息包含下列內(nèi)容：

method：請(qǐng)求的方法，如： GET、 POST

headers：請(qǐng)求頭部信息，可以是一個(gè) Headers 對(duì)象的實(shí)例，也可以是一個(gè)簡(jiǎn)單對(duì)象

body: 需要發(fā)送的數(shù)據(jù)，可以是 Blob, BufferSource, FormData, URLSearchParams, 或者 USVString。需要注意的是 GET 和 HEAD 方法不能包含 body。

mode：請(qǐng)求的模式，常見取值如下：

same-origin：只允許同源的請(qǐng)求，否則直接報(bào)錯(cuò)

cors：允許跨域，但要求響應(yīng)中包含 Access-Control-Allow-* 這類表示 CORS 的頭部信息，且響應(yīng)中只有部分頭部信息（ Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma）可以讀取，但響應(yīng)內(nèi)容可以不受限地讀取。

no-cors：允許跨域請(qǐng)求那些響應(yīng)中沒有包含 CORS 頭信息的域，但是響應(yīng)內(nèi)容是不可讀取的。使用使用這種模式配合 ServiceWorkers 可以實(shí)現(xiàn)預(yù)加載一些資源。

credentials：表示是否發(fā)送 cookie，有三個(gè)可選值 omit, same-origin, include

omit：不發(fā)生 cookie

same-origin：僅在同源時(shí)發(fā)生 cookie

include：發(fā)送 cookie

cache：表示處理緩存的策略，可選值為 default、no-store、reload、no-cache、force-cache、only-if-cached，關(guān)于此可以參考https://fetch.spec.whatwg.org

redirect：發(fā)生重定向時(shí)候的策略。有以下可選值：

follow：跟隨

error：發(fā)生錯(cuò)誤

manual：需要用戶手動(dòng)跟隨

referrer：一個(gè)字符串，可以是 no-referrer, client, 或者是一個(gè) URL。默認(rèn)值是 client。

integrity：包含一個(gè)用于驗(yàn)證子資源完整性的字符串。關(guān)于此，可以參看 Subresource Integrity 介紹

該函數(shù)返回一個(gè) Promise 對(duì)象，若請(qǐng)求成功會(huì)用 Response 的實(shí)例作為參數(shù)調(diào)用 resolve ，若請(qǐng)求失敗會(huì)用一個(gè)錯(cuò)誤對(duì)象來(lái)調(diào)用 reject。

Headers 類

Headers 類用來(lái)表示 HTTP 的頭部信息，其構(gòu)造函數(shù)可以接受一個(gè)表示 HTTP 頭信息的對(duì)象，也可以接受一個(gè) Headers 類的實(shí)例作為對(duì)象：

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

var anotherHeader = new Headers(header);

Headers 實(shí)例的方法 append

對(duì)一個(gè)字段追加信息，如果該字段不存在，就創(chuàng)建一個(gè)。

var header = new Headers();
header.append("Accept-Encoding", "deflate");
header.append("Accept-Encoding", "gzip");
// Accept-Encoding: ["deflate", "gzip"]

delete

刪除某個(gè)字段

get

獲得某個(gè)字段的第一個(gè)值

var header = new Headers();
header.append("Accept-Encoding", "deflate");
header.append("Accept-Encoding", "gzip");

header.get("Accept-Encoding"); //=> "deflate"

getAll

獲得某個(gè)字段所有的值

var header = new Headers();
header.append("Accept-Encoding", "deflate");
header.append("Accept-Encoding", "gzip");

header.getAll("Accept-Encoding"); //=> ["deflate", "gzip"]

has

判斷是否存在某個(gè)字段

set

設(shè)置一個(gè)字段，如果該字段已經(jīng)存在，那么會(huì)覆蓋之前的。

forEach

遍歷所有的字段，接受一個(gè)回調(diào)函數(shù)，和可選的第二個(gè)參數(shù)?？蛇x的第二個(gè)參數(shù)地值作為回調(diào)函數(shù)的 this 值。

var header = new Headers();
header.append("Accept-Encoding", "deflate");

header.forEach(function(value, name, header){
  //...
},this);

Request 類

Request 對(duì)象用于描述請(qǐng)求內(nèi)容。構(gòu)造函數(shù)接受的參數(shù)和 fetch 函數(shù)的參數(shù)形式一樣，實(shí)際上 fetch 方法會(huì)使用傳入的參數(shù)構(gòu)造出一個(gè) Request 對(duì)象來(lái)。

下面例子從 github 抓取到 react 的 star 數(shù)并打印出來(lái)。

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 實(shí)例的屬性

以下屬性均為只讀屬性。這些屬性的意義均在上面介紹 fetch 的參數(shù)的時(shí)候有過(guò)說(shuō)明。

method

url

headers

referrer

referrerPolicy：處理來(lái)源信息的策略，關(guān)于此可以參見Referrer Policy

mode

credentials

redirect

integrity

cache

Response 類

Response 用來(lái)表示 HTTP 請(qǐng)求的響應(yīng)。其構(gòu)造函數(shù)形式如下：

var res = new Response(body, init);

其中 body 可以是：

Blob

BufferSource

FormData

URLSearchParams

USVString

init 是一個(gè)對(duì)象，其中包括以下字段：

status：響應(yīng)的狀態(tài)碼，比如 200，404

statusText：狀態(tài)信息，比如 OK

headers: 頭部信息，可以是一個(gè)對(duì)象，也可以是一個(gè) Headers 實(shí)例

Response 實(shí)例的屬性

以下屬性均為只讀屬性

bodyUsed：用于表示響應(yīng)內(nèi)容是否有被使用過(guò)

headers：頭部信息

ok：表明請(qǐng)求是否成功，當(dāng)響應(yīng)的狀態(tài)碼是 200~299 時(shí)，該值為 true

status：狀態(tài)碼

statusText：狀態(tài)信息

type：表明了響應(yīng)的類型，可能是下面幾種值：

basic：同源

cors：跨域

error：出錯(cuò)

opaque：Request 的 mode 設(shè)置為 no-cors 的時(shí)候響應(yīng)式不透明了，這個(gè)時(shí)候 type 為 opaque

url：響應(yīng)的地址

Response 實(shí)例的方法

clone：復(fù)制一個(gè)響應(yīng)對(duì)象

要想從 Response 的實(shí)例中拿到最終的數(shù)據(jù)需要調(diào)用下面這些方法，這些方法都返回一個(gè) Promise 并且使用對(duì)應(yīng)的數(shù)據(jù)類型來(lái) resolve。

arrayBuffer：把響應(yīng)數(shù)據(jù)轉(zhuǎn)化為 arrayBuffer 來(lái) resolve

blob：把響應(yīng)數(shù)據(jù)轉(zhuǎn)換為 Blob 來(lái) resolve

formData：把響應(yīng)數(shù)據(jù)轉(zhuǎn)化為 formData 來(lái) resolve

json：把響應(yīng)數(shù)據(jù)解析為對(duì)象后 resolve

text：把響應(yīng)數(shù)據(jù)當(dāng)做字符串來(lái)調(diào)用 resolve

總結(jié)

最后在把上面使用例子進(jìn)行一個(gè)細(xì)致的說(shuō)明：

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

// 發(fā)起請(qǐng)求，fetch 方法返回一個(gè) Promise 對(duì)象
fetch(req).then(function(res){
  // 得到了 response，這里調(diào)用 response 的 json 方法
  // 該方法同樣返回一個(gè) Promise
  return res.json();
}).then(function(data){
  // 得到解析后的對(duì)象
  console.log(data.stargazers_count)
});

可以看出 fetch 方法使用起來(lái)比 XMLHttpRequest 要方便的多，關(guān)于其兼容性，可以參考這里，對(duì)于不兼容的瀏覽器，你可以使用 polyfill。