WindowOrWorkerGlobalScope接口方法：fetch()

fetch()方法

WindowOrWorkerGlobalScope mixin 的 fetch() 方法啟動(dòng)從網(wǎng)絡(luò)獲取資源的過程。這將返回一個(gè) promise，它解析為表示對(duì)請(qǐng)求的響應(yīng)的 Response 對(duì)象。

WorkerOrGlobalScope 由 Window 和 WorkerGlobalScope 實(shí)現(xiàn)的，這意味著該 fetch() 方法是在幾乎可以在其中獲取資源的任何上下文中都可用。

當(dāng)遇到網(wǎng)絡(luò)錯(cuò)誤時(shí)。一個(gè) fetch() 承諾拒絕使用 TypeError，雖然這通常意味著權(quán)限問題或類似的情況。準(zhǔn)確檢查成功的 fetch() 將包括檢查 promise 是否解決，然后檢查該 Response.ok 屬性的值為 true。HTTP 狀態(tài)為404并不構(gòu)成網(wǎng)絡(luò)錯(cuò)誤。

該fetch()方法由內(nèi)容安全策略的 connect-src 指令控制略，而不是它的檢索資源的指令。

注意：該 fetch() 方法的參數(shù)與 Request() 構(gòu)造函數(shù)的參數(shù)相同。

fetch()方法語法

Promise <Response> fetch（input [，init]）;

fetch()方法參數(shù)

input

這定義了您想要獲取的資源。這可以是：

• 一個(gè)USVString，它包含要獲取資源的直接 URL，一些瀏覽器接受blob:和data:作為方案。
• 一個(gè)Request對(duì)象。

init 可選的

包含要應(yīng)用于請(qǐng)求的任何自定義設(shè)置的選項(xiàng)對(duì)象?？赡艿倪x項(xiàng)是：

• method：請(qǐng)求方法，例如GET，POST。
• headers：您想添加到您的請(qǐng)求中的任何標(biāo)題，包含在Headers對(duì)象或帶有ByteString值的對(duì)象文本中。
• body：您要添加到您的請(qǐng)求的任何 body：這可以是一個(gè)Blob，BufferSource，FormData，URLSearchParams，或USVString對(duì)象。請(qǐng)注意，使用GET或者HEAD方法的請(qǐng)求不能有一個(gè) body。
• mode：該模式下，你要使用的要求，例如cors，no-cors或same-origin。
• credentials：請(qǐng)求憑據(jù)要使用的要求：omit，same-origin或include。要為當(dāng)前域自動(dòng)發(fā)送Cookie，必須提供此選項(xiàng)。從Chrome 50開始，此屬性還需要一個(gè)FederatedCredential實(shí)例或一個(gè)PasswordCredential實(shí)例。
• cache：您要使用該請(qǐng)求的緩存模式default，no-store，reload，no-cache，force-cache或only-if-cached。
• redirect：要使用的重定向模式:follow（自動(dòng)跟隨重定向），error（如果發(fā)生重定向時(shí)發(fā)生錯(cuò)誤則中止）或manual（手動(dòng)重定向處理）。在Chrome中默認(rèn)是follow （在Chrome 47之前默認(rèn)manual）。
• referrer：USVString指定no-referrer，  client或URL。默認(rèn)是client。
• referrerPolicy：指定引用者HTTP頭的值。可以是一個(gè)no-referrer，no-referrer-when-downgrade，origin，origin-when-cross-origin，unsafe-url。
• integrity：包含請(qǐng)求的子資源完整性值（例如，sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。
• keepalive：該keepalive選項(xiàng)可用于允許請(qǐng)求超出頁面。使用該keepalive標(biāo)志提取是Navigator.sendBeacon()API 的替代品。 
• signal：一個(gè)AbortSignal對(duì)象實(shí)例；允許您與獲取請(qǐng)求進(jìn)行通信，并在需要時(shí)通過AbortController。

fetch()方法返回值

fetch()方法返回一個(gè) Promise，它解析為一個(gè) Response 對(duì)象。

fetch()方法異常

fetch()方法示例

在我們的 Fetch Request 示例中，我們使用相關(guān)的構(gòu)造函數(shù)創(chuàng)建一個(gè)新 Request 對(duì)象，然后使用 fetch() 調(diào)用獲取它。由于我們正在獲取圖像，因此我們?cè)陧憫?yīng)上運(yùn)行 Body.blob() 以提供適當(dāng)?shù)?MIME 類型，以便正確處理它，然后創(chuàng)建一個(gè) Object URL 并將其顯示在 <img> 元素中。

var myImage = document.querySelector('img');

var myRequest = new Request('flowers.jpg');

fetch(myRequest).then(function(response) {
  return response.blob();
}).then(function(response) {
  var objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
});

在我們用 init 和 Request 獲取請(qǐng)求示例之后，我們做了同樣的事情，只不過我們?cè)谡{(diào)用 fetch() 時(shí)傳入 init 對(duì)象：

var myImage = document.querySelector('img');

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg');

fetch(myRequest,myInit).then(function(response) {
  ... 
});

請(qǐng)注意，您也可以將 init 對(duì)象與 Request 構(gòu)造函數(shù)一起傳遞以獲得相同的效果，例如：

var myRequest = new Request('flowers.jpg', myInit);

也可以在 init 中使用對(duì)象文本作為 headers：

var myInit = { method: 'GET',
               headers: {
                   'Content-Type': 'image/jpeg'
               },
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg', myInit);

規(guī)范

瀏覽器兼容性

我們正在將兼容性數(shù)據(jù)轉(zhuǎn)換為機(jī)器可讀的JSON格式。

• 電腦端

• 移動(dòng)端

注釋：

[1] API 是在首選項(xiàng)后面實(shí)現(xiàn)的。

[2] fetch() 現(xiàn)在在 WindowOrWorkerGlobalScope mixin 上定義。