Запрос: свойство cache
Базовая Широко доступна *
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2017 года.
* Некоторые части этой функции могут иметь различный уровень поддержки.
Примечание: Эта функция доступна в Web Workers.
Чтение-только свойство cache интерфейса Request содержит режим кэширования запроса. Оно управляет взаимодействием запроса с кэшем браузера HTTP.
Значение
Значение типа RequestCache. Доступные значения:
-
default— Браузер ищет соответствующий запрос в кэше HTTP.- Если совпадение найдено и оно актуально, оно будет возвращено из кэша.
- Если совпадение найдено, но оно устарело, браузер отправит условный запрос на удаленный сервер. Если сервер сообщит, что ресурс не изменился, он будет возвращен из кэша. В противном случае ресурс будет загружен с сервера, и кэш будет обновлён.
- Если совпадения нет, браузер отправит обычный запрос и обновит кэш загруженным ресурсом.
-
no-store— Браузер загружает ресурс с удаленного сервера, не проверяя кэш, и не обновит кэш загруженным ресурсом. -
reload— Браузер загружает ресурс с удаленного сервера, не проверяя кэш, но обновит кэш загруженным ресурсом. -
no-cache— Браузер ищет соответствующий запрос в кэше HTTP.- Если совпадение найдено, актуальное или устаревшее, браузер отправит условный запрос на удаленный сервер. Если сервер сообщит, что ресурс не изменился, он будет возвращен из кэша. В противном случае ресурс будет загружен с сервера, и кэш будет обновлён.
- Если совпадения нет, браузер отправит обычный запрос и обновит кэш загруженным ресурсом.
-
force-cache— Браузер ищет соответствующий запрос в кэше HTTP.- Если совпадение найдено, актуальное или устаревшее, оно будет возвращено из кэша.
- Если совпадения нет, браузер отправит обычный запрос и обновит кэш загруженным ресурсом.
-
only-if-cached— Браузер ищет соответствующий запрос в кэше HTTP. Экспериментальный- Если совпадение найдено, актуальное или устаревшее, оно будет возвращено из кэша.
- Если совпадения нет, браузер вернёт статус 504 Gateway timeout.
Режим
"only-if-cached"может быть использован только если у запроса свойствоmodeимеет значение"same-origin". Перенаправления из кэша будут следовать, если свойство запросаredirectравно"follow", и перенаправления не нарушают режим"same-origin".
Примеры
// 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② |
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
cache |
64 | 14 | 48 | 51 | 10.1 | 64 | 48 | 47 | 10.3 | 9.0 | 64 |
only-if-cached |
64 | 79 | 50 | 51 | 10.1 | 64 | Нет | 47 | 10.3 | 9.0 | 64 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Request/cache