WindowOrWorkerGlobalScope接口方法：fetch()

fetch()方法

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

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

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

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

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

fetch()方法語法

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

fetch()方法參數(shù)

input

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

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

init 可選的

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

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

fetch()方法返回值

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

fetch()方法異常

fetch()方法示例

在我們的 Fetch Request 示例中，我們使用相關(guān)的構(gòu)造函數(shù)創(chuàng)建一個新 Request 對象，然后使用 fetch() 調(diào)用獲取它。由于我們正在獲取圖像，因此我們在響應(yīng)上運(yùn)行 Body.blob() 以提供適當(dāng)?shù)?MIME 類型，以便正確處理它，然后創(chuàng)建一個 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 獲取請求示例之后，我們做了同樣的事情，只不過我們在調(diào)用 fetch() 時傳入 init 對象：

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) {
  ... 
});

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

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

也可以在 init 中使用對象文本作為 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格式。

• 電腦端

• 移動端

注釋：

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

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