cache
只读特性在
Request
interface contains the cache mode of the request. It controls how the request will interact with the browser's
HTTP cache
.
var currentCacheMode = request.cache;
A
RequestCache
value. The available values are:
default
— The browser looks for a matching request in its HTTP cache.
no-store
— The browser fetches the resource from the remote server without first looking in the cache,
and will not
update the cache with the downloaded resource.
reload
— The browser fetches the resource from the remote server without first looking in the cache,
but then will
update the cache with the downloaded resource.
no-cache
— The browser looks for a matching request in its HTTP cache.
force-cache
— The browser looks for a matching request in its HTTP cache.
only-if-cached
— The browser looks for a matching request in its HTTP cache.
"only-if-cached"
mode can only be used if the request's
mode
is
"same-origin"
. Cached redirects will be followed if the request's
redirect
特性为
"follow"
and the redirects do not violate the
"same-origin"
模式。
// Download a resource with cache busting, to bypass the cache
// completely.
fetch("some.json", {cache: "no-store"})
.then(function(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(function(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(function(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(function(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 simply 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() - 86400000)) {
// 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() - 300000)) // If it's older than 5 minutes
fetch("some.json", {cache: "no-cache", mode: "same-origin"}) // no cancellation or return value.
return res
})
.then(function(response) { /* consume the (possibly stale) response */ })
.catch(error => { /* Can be an AbortError/DOMError or a TypeError */ });
| 规范 | 状态 | 注释 |
|---|---|---|
|
Fetch
The definition of 'cache' in that specification. |
实时标准 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
cache
|
Chrome 64 | Edge 14 | Firefox 48 | IE No | Opera 51 | Safari 11 | WebView Android 64 | Chrome Android 64 | Firefox Android No | Opera Android 47 | Safari iOS No | Samsung Internet Android 9.0 |
only-if-cached
|
Chrome No | Edge No | Firefox 50 | IE No | Opera No | Safari No | WebView Android No | Chrome Android No | Firefox Android No | Opera Android No | Safari iOS No | Samsung Internet Android No |
完整支持
不支持
实验。期望将来行为有所改变。