Spec-Zone.ru › Web APIs

Запрос: свойство 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

См. также

  • API сервисных рабочих потоков
  • Управление доступом к HTTP (CORS)
  • HTTP

© 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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API