Window: fetch() 方法
Baseline 廣泛可用 *
Window 介面的 fetch() 方法開始從網路獲取資源的過程，返回一個在響應可用時兌現的 Promise。
此 Promise 解析為表示對你的請求的 Response 物件。
fetch() 的 Promise 僅在請求失敗時才會被拒絕，例如，由於請求 URL 格式不正確或網路錯誤。如果伺服器響應的 HTTP 狀態碼錶示錯誤（404、504 等），fetch() 的 Promise 不會 被拒絕。相反，then() 處理程式必須檢查 Response.ok 和/或 Response.status 屬性。
fetch() 方法受內容安全策略 (Content Security Policy) 的 connect-src 指令控制，而不是它所檢索資源的指令。
注意： fetch() 方法的引數與 Request() 建構函式的引數相同。
語法
fetch(resource)
fetch(resource, options)
引數
resource-
這定義了你希望獲取的資源。這可以是
- 一個字串或任何其他帶有字串化器（包括
URL物件）的物件，它提供你想要獲取的資源的 URL。URL 可以是相對於基 URL 的，基 URL 在視窗上下文中是文件的baseURI，在工作器上下文中是WorkerGlobalScope.location。 - 一個
Request物件。
- 一個字串或任何其他帶有字串化器（包括
options可選-
一個
RequestInit物件，其中包含你希望應用於請求的任何自定義設定。
返回值
一個解析為 Response 物件的 Promise。
異常
AbortErrorDOMException-
由於呼叫了
AbortController的abort()方法，請求被中止。 NotAllowedErrorDOMException-
如果透過
browsing-topics許可權策略明確禁止使用 Topics API，並且使用browsingTopics: true發出了fetch()請求，則丟擲此錯誤。 TypeError-
可能由於以下原因發生
- 請求的 URL 無效。
- 請求的 URL 包含憑據（使用者名稱和密碼）。
- 作為
options值傳遞的RequestInit物件包含具有無效值的屬性。 - 請求被許可權策略阻止。
- 存在網路錯誤（例如，因為裝置沒有連線）。
示例
在我們的 Fetch Request 示例（請參閱 Fetch Request live）中，我們使用相關建構函式建立一個新的 Request 物件，然後使用 fetch() 呼叫來獲取它。由於我們正在獲取影像，我們對響應執行 Response.blob() 以使其具有正確的 MIME 型別，以便正確處理，然後建立它的物件 URL 並在
const myImage = document.querySelector("img");
const myRequest = new Request("flowers.jpg");
window
.fetch(myRequest)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.blob();
})
.then((response) => {
myImage.src = URL.createObjectURL(response);
});
在我們的帶 init 的 Fetch Request 示例（請參閱 Fetch Request init live）中，我們做了同樣的事情，只是我們在呼叫 fetch() 時傳遞了一個 *options* 物件。在這種情況下，我們可以設定一個 Cache-Control 值來指示我們可接受的快取響應型別
const myImage = document.querySelector("img");
const reqHeaders = new Headers();
// A cached response is okay unless it's more than a week old
reqHeaders.set("Cache-Control", "max-age=604800");
const options = {
headers: reqHeaders,
};
// Pass init as an "options" object with our headers.
const req = new Request("flowers.jpg", options);
fetch(req).then((response) => {
// …
});
你也可以在 Request 建構函式中傳入 init 物件以達到相同的效果
const req = new Request("flowers.jpg", options);
你也可以使用物件字面量作為 init 中的 headers
const options = {
headers: {
"Cache-Control": "max-age=60480",
},
};
const req = new Request("flowers.jpg", options);
使用 fetch 文章提供了更多使用 fetch() 的示例。
規範
| 規範 |
|---|
| Fetch # fetch-method |
瀏覽器相容性
載入中…