Body執(zhí)行者：Request

Request

Fetch API的Request接口代表一個資源請求。

您可以使用Request.Request()構(gòu)造函數(shù)創(chuàng)建一個新的Request對象，但是您更可能遇到由于另一個API操作（如service worker，FetchEvent.request）而返回的Request對象。

Request構(gòu)造函數(shù)

Request.Request()

創(chuàng)建一個新的Request對象。

Request屬性

Request.method 只讀

包含請求的方法（GET，POST等）

Request.url 只讀

包含請求的URL。

Request.headers 只讀

包含請求的 Headers 關(guān)聯(lián)對象。

Request.context 只讀 

包含請求的上下文（例如，audio，image，iframe，等等）

Request.referrer 只讀

包含請求的引用者（例如，client）。

Request.referrerPolicy 只讀

包含請求的引用者策略（例如，no-referrer）。

Request.mode 只讀

包含請求的模式（例如，cors，no-cors，same-origin，navigate。）

Request.credentials 只讀

包含請求的憑證（例如omit，same-origin）。

Request.redirect 只讀

包含如何處理重定向的模式。這可能是一個follow，error或manual。

Request.integrity 只讀

包含請求的子資源完整性值（例如，sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

Request.cache 只讀

包含請求的高速緩存模式（例如，default，reload，no-cache）。

Request實(shí)現(xiàn)Body，所以它也有以下屬性可用：

Body.body 只讀

一個簡單的getter用來暴露ReadableStream正文內(nèi)容。

Body.bodyUsed 只讀

存儲一個Boolean聲明是否已經(jīng)在響應(yīng)中使用了該機(jī)構(gòu)。

Request 方法

Request.clone()

創(chuàng)建當(dāng)前Request對象的副本。

Request實(shí)現(xiàn)Body，所以它也有以下方法可用：

Body.arrayBuffer()

返回一個promise，使用請求主體的ArrayBuffer表現(xiàn)解決。

Body.blob()

返回一個promise，使用請求主體的Blob表現(xiàn)解決。

Body.formData()

返回一個promise，使用請求主體的FormData表現(xiàn)解決。

Body.json()

返回一個promise，使用請求主體的JSON表現(xiàn)解決。

Body.text()

返回一個promise，使用請求主體的USVString（文本）表現(xiàn)解決。

注意：這些Body功能只能運(yùn)行一次；隨后的調(diào)用將用空字符串/ ArrayBuffers解決。

Request使用例子

在下面的代碼片段中，我們使用Request()構(gòu)造函數(shù)創(chuàng)建一個新的請求（對于與腳本相同的目錄中的圖像文件），然后返回請求的一些屬性值：

const myRequest = new Request('http://localhost/flowers.jpg');

const myURL = myRequest.url; // http://localhost/flowers.jpg
const myMethod = myRequest.method; // GET
const myCred = myRequest.credentials; // omit

然后，您可以通過將Request對象作為參數(shù)傳遞給GlobalFetch.fetch()調(diào)用來獲取此請求，例如：

fetch(myRequest)
  .then(response => response.blob())
  .then(blob => {
    myImage.src = URL.createObjectURL(blob);
  });

在下面的代碼片段中，我們使用Request()帶有一些初始數(shù)據(jù)和正文內(nèi)容的構(gòu)造函數(shù)創(chuàng)建了一個新請求，用于需要主體負(fù)載的api請求：

const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
 
const myURL = myRequest.url; // http://localhost/api
const myMethod = myRequest.method; // POST
const myCred = myRequest.credentials; // omit
const bodyUsed = myRequest.bodyUsed; // true

注意：body類型只能是一個Blob，BufferSource，F(xiàn)ormData，URLSearchParams，USVString或 ReadableStream類型，因此增加一個JSON對象的有效載荷則需要字符串化該對象。

然后，您可以通過將Request對象作為參數(shù)傳遞給GlobalFetch.fetch()調(diào)用來獲取此api請求，例如獲取響應(yīng)：

fetch(myRequest)
  .then(response => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('Something went wrong on api server!');
    }
  })
  .then(response => {
    console.debug(response);
    // ...
  }).catch(error => {
    console.error(error);
  });

規(guī)范

瀏覽器兼容性

• 電腦端

• 移動端

注解：

[1]可讀流目前在Firefox中啟用，但隱藏在dom.streams.enabled和javascript.options.streamsprefs 后面。