Request.cache — Eigenschaft · JavaScript-Referenz

Signatur

Request.cache

Beschreibung

Die Eigenschaft Request.cache gibt den Cache-Modus zurück, mit dem ein Request erstellt wurde. Der Modus bestimmt, wie fetch() den HTTP-Cache des Browsers nutzt: ob eine gespeicherte Antwort verwendet wird, ob der Server gefragt wird, ob die Antwort noch gültig ist, und ob die neue Antwort im Cache gespeichert wird. Den Cache-Modus legst du über die Option cache im Konstruktor new Request() oder direkt in fetch(url, { cache }) fest. Nach dem Erstellen lässt sich der Wert nur noch lesen.

Mögliche Werte:

"default": Normales Verhalten. Eine frische Antwort aus dem Cache wird direkt verwendet. Ist sie veraltet, wird beim Server nachgefragt, ob sie noch gilt (Revalidierung). Gibt es keinen Eintrag, wird normal geladen und das Ergebnis gespeichert.
"no-store": Der Cache wird weder gelesen noch beschrieben.
"reload": Der Cache wird nicht gelesen. Es wird immer vom Netzwerk geladen, und der Cache wird mit der Antwort aktualisiert.
"no-cache": Ein vorhandener Eintrag wird immer beim Server auf Gültigkeit geprüft, auch wenn er noch frisch ist. Danach wird der Cache aktualisiert.
"force-cache": Ein vorhandener Eintrag wird verwendet, auch wenn er veraltet ist. Nur ohne Eintrag wird geladen.
"only-if-cached": Es wird nur der Cache verwendet. Ohne Eintrag kommt ein Fehler mit Status 504. Dieser Modus ist nur zusammen mit mode: "same-origin" erlaubt.

Das Auslesen von request.cache ist vor allem in Service Workern nützlich. Dort kann ein fetch-Handler abhängig vom Cache-Modus der eingehenden Anfrage entscheiden, ob er z. B. eine Antwort aus der Cache Storage API liefert oder das Netzwerk fragt.

Rückgabewert

Typ

Beschreibung

Ein String mit dem Cache-Modus der Anfrage. Wurde keiner angegeben, ist der Wert "default".

Beispiele

Cache-Modus beim Erstellen setzen und auslesen

const standard = new Request('/api/config');
console.log(standard.cache);

const frisch = new Request('/api/config', { cache: 'no-store' });
console.log(frisch.cache);

default no-store

Aktuelle Daten erzwingen und den Cache aktualisieren

const ladeKurse = async () => {
  // Cache nicht lesen, aber mit der neuen Antwort befüllen
  const request = new Request('/api/boersenkurse', { cache: 'reload' });
  console.log(`Cache-Modus: ${request.cache}`);

  const response = await fetch(request);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
};

ladeKurse().then((daten) => console.log(daten));

Cache-Modus: reload

Service Worker: auf den Cache-Modus reagieren

// sw.js
self.addEventListener('fetch', (event) => {
  const { request } = event;

  // Seiten-Code verlangt ausdrücklich frische Daten -> Service-Worker-Cache umgehen
  if (request.cache === 'no-store' || request.cache === 'reload') {
    event.respondWith(fetch(request));
    return;
  }

  // Sonst zuerst im Cache suchen, bei Fehlschlag das Netzwerk fragen
  event.respondWith(
    caches.match(request).then((cached) => cached ?? fetch(request))
  );
});

Offline-Prüfung mit only-if-cached

const ausCacheLaden = async (url) => {
  try {
    const response = await fetch(url, {
      cache: 'only-if-cached',
      mode: 'same-origin' // Pflicht bei only-if-cached
    });
    return response.ok ? await response.text() : null;
  } catch (err) {
    console.warn('Kein Cache-Eintrag vorhanden:', err.message);
    return null;
  }
};

ausCacheLaden('/artikel/42.html').then(console.log);

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung wie request.cache = 'no-store' wird ohne Fehlermeldung ignoriert (im Strict Mode gibt es einen TypeError). Um den Modus zu ändern, erstellst du ein neues Objekt: new Request(request, { cache: 'reload' }).
only-if-cached funktioniert nur mit mode: "same-origin". Andernfalls wirft der Konstruktor einen TypeError.
Nicht mit der Cache Storage API verwechseln: cache steuert nur den HTTP-Cache des Browsers. Auf caches bzw. Cache in Service Workern hat er keine direkte Wirkung.
"no-cache" bedeutet nicht „nicht cachen“, sondern „vor der Verwendung immer beim Server prüfen“. Wenn gar nichts gespeichert werden soll, nimm "no-store".
Browser fügen bei no-store, reload oder no-cache eventuell selbst Header wie Cache-Control oder Pragma hinzu. Bei Cross-Origin-Anfragen kann das eine CORS-Preflight-Anfrage auslösen.
Kompatibilität: In allen modernen Browsern verfügbar. Ältere Safari-Versionen (vor 10.1) und der Internet Explorer unterstützen die Fetch-API nicht. In Node.js (undici) wird der Wert angenommen, aber es gibt keinen eingebauten HTTP-Cache. Er hat dort also praktisch keine Wirkung.

Siehe auch

Request Request.mode Request.credentials Cache FetchEvent