Request: cache 屬性
Baseline 廣泛可用 *
注意：此功能在 Web Workers 中可用。
Request 介面的只讀屬性 cache 包含請求的快取模式。它控制著請求如何與瀏覽器的 HTTP 快取 進行互動。
值
一個 RequestCache 值。可用值為：
-
default— 瀏覽器在其 HTTP 快取中查詢匹配的請求。 -
no-store— 瀏覽器會從遠端伺服器獲取資源，而不會先查詢快取，並且不會使用下載的資源更新快取。 -
reload— 瀏覽器會從遠端伺服器獲取資源，而不會先查詢快取，但之後會使用下載的資源更新快取。 -
no-cache— 瀏覽器在其 HTTP 快取中查詢匹配的請求。- 如果找到匹配項，無論新鮮或過期，瀏覽器都會向遠端伺服器傳送一個條件請求。如果伺服器指示資源未更改，則會從快取中返回。否則，將從伺服器下載資源，並更新快取。
- 如果沒有找到匹配項，瀏覽器將傳送一個常規請求，並使用下載的資源更新快取。
-
force-cache— 瀏覽器在其 HTTP 快取中查詢匹配的請求。- 如果找到匹配項，無論新鮮或過期，則會從快取中返回。
- 如果沒有找到匹配項，瀏覽器將傳送一個常規請求，並使用下載的資源更新快取。
-
only-if-cached— 瀏覽器在其 HTTP 快取中查詢匹配的請求。 實驗性- 如果找到匹配項，無論新鮮或過期，則會從快取中返回。
- 如果沒有找到匹配項，瀏覽器將以 504 閘道器超時 狀態進行響應。
僅當請求的
mode為"same-origin"時，才能使用"only-if-cached"模式。如果請求的redirect屬性為"follow"並且重定向不違反"same-origin"模式，則會遵循快取的重定向。
示例
js
// Download a resource with cache busting, to bypass the cache
// completely.
fetch("some.json", { cache: "no-store" }).then((response) => {
/* consume the response */
});
// Download a resource with cache busting, but update the HTTP
// cache with the downloaded resource.
fetch("some.json", { cache: "reload" }).then((response) => {
/* consume the response */
});
// Download a resource with cache busting when dealing with a
// properly configured server that will send the correct ETag
// and Date headers and properly handle If-Modified-Since and
// If-None-Match request headers, therefore we can rely on the
// validation to guarantee a fresh response.
fetch("some.json", { cache: "no-cache" }).then((response) => {
/* consume the response */
});
// Download a resource with economics in mind! Prefer a cached
// albeit stale response to conserve as much bandwidth as possible.
fetch("some.json", { cache: "force-cache" }).then((response) => {
/* consume the response */
});
// Naive stale-while-revalidate client-level implementation.
// Prefer a cached albeit stale response; but update if it's too old.
// AbortController and signal to allow better memory cleaning.
// In reality; this would be a function that takes a path and a
// reference to the controller since it would need to change the value
let controller = new AbortController();
fetch("some.json", {
cache: "only-if-cached",
mode: "same-origin",
signal: controller.signal,
})
.catch((e) =>
e instanceof TypeError && e.message === "Failed to fetch"
? { status: 504 } // Workaround for chrome; which fails with a TypeError
: Promise.reject(e),
)
.then((res) => {
if (res.status === 504) {
controller.abort();
controller = new AbortController();
return fetch("some.json", {
cache: "force-cache",
mode: "same-origin",
signal: controller.signal,
});
}
const date = res.headers.get("date"),
dt = date ? new Date(date).getTime() : 0;
if (dt < Date.now() - 86_400_000) {
// if older than 24 hours
controller.abort();
controller = new AbortController();
return fetch("some.json", {
cache: "reload",
mode: "same-origin",
signal: controller.signal,
});
}
// Other possible conditions
if (dt < Date.now() - 300_000)
// If it's older than 5 minutes
fetch("some.json", { cache: "no-cache", mode: "same-origin" }); // no cancellation or return value.
return res;
})
.then((response) => {
/* consume the (possibly stale) response */
})
.catch((error) => {
/* Can be an AbortError/DOMException or a TypeError */
});
規範
| 規範 |
|---|
| Fetch # ref-for-dom-request-cache② |
瀏覽器相容性
載入中…