fetch (), wie stellen Sie eine nicht zwischengespeicherte Anfrage?

75

mit fetch('somefile.json'), ist es möglich zu verlangen, dass die Datei vom Server und nicht aus dem Browser-Cache abgerufen wird?

Mit anderen Worten, fetch()ist es mit möglich, den Cache des Browsers zu umgehen?

javascript html fetch-api cc jung
quelle
1
Haben Sie eine Referenz zum Abrufen im Entwurf ECMA-262 ed 6 ? Ich sehe es nicht Oder meinst du den WHATWG Fetch Lebensstandard ?
RobG
RobG - mit developer.mozilla.org/en-US/docs/Web/API/FetchEvent
cc young

Antworten:

106

Beim Abrufen kann ein Init-Objekt verwendet werden, das viele benutzerdefinierte Einstellungen enthält, die Sie möglicherweise auf die Anforderung anwenden möchten. Dazu gehört eine Option namens "Header".

Die Option "Header" verwendet ein Header- Objekt. Mit diesem Objekt können Sie die Header konfigurieren, die Sie Ihrer Anfrage hinzufügen möchten.

Durch Hinzufügen von Pragma: No-Cache und Cache-Control: No-Cache zu Ihrem Header wird der Browser gezwungen, den Server zu überprüfen, um festzustellen, ob sich die Datei von der Datei unterscheidet, die sich bereits im Cache befindet. Sie können auch die Cache-Steuerung verwenden: no-store, da der Browser und alle Zwischen-Caches einfach keine Version der zurückgegebenen Antwort speichern können.

Hier ist ein Beispielcode:

var myImage = document.querySelector('img');

var myHeaders = new Headers();
myHeaders.append('pragma', 'no-cache');
myHeaders.append('cache-control', 'no-cache');

var myInit = {
  method: 'GET',
  headers: myHeaders,
};

var myRequest = new Request('myImage.jpg');

fetch(myRequest, myInit)
  .then(function(response) {
    return response.blob();
  })
  .then(function(response) {
    var objectURL = URL.createObjectURL(response);
    myImage.src = objectURL;
  });
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6</title>
</head>
<body>
    <img src="">
</body>
</html>
Erweitern Sie das Snippet

Hoffe das hilft.

brennende Sicherungen
quelle
6
Was ist mit der Verwendung new Requestund Übergabe von Argumenten an die cacheOptionen? Ich versuche das zu benutzen, aber es funktioniert nicht.
Mitar
Ist die Großschreibung der Header wichtig? Dh "Cache-Control" vs "Cache-Control".
Isaac Lyman
4
@IsaacLyman, obwohl bei HTTP-Headern die Groß- und Kleinschreibung nicht berücksichtigt wird, empfehlen wir Ihnen, die vorgeschlagene Dokumentation zu befolgen: "Cache-Control". Referenz: developer.mozilla.org/en-US/docs/Web/HTTP/Headers
Brennen von Sicherungen
89

Einfachere Verwendung der Cache-Modi:

  // 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 */ });

Aktualisierung: https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/

MJ Vakili
quelle
1
Dies ist eine angemessenere Antwort. Mit diesen Optionen können Sie Header wie "If-Modified-Since" und "If-None-Match" verarbeiten.
Nigiri
9
Dies scheint in Firefox (54) zu funktionieren, nicht jedoch in Chrome (60). Die Antwort von BurningFuses funktioniert.
Scimonster
1
Ich habe es getestet und bis heute (November 2019) scheint diese Methode unter Opera, Chrome und FireFox unter Windows, Linux und Android zu funktionieren. Die Burningfuses-Methode schlägt zumindest unter Opera fehl.
Sopalajo de Arrierez
In meinem Fall pragma: no-cache
erzwang
14

Sie können 'Cache-Control': 'no-cache'in der Kopfzeile wie folgt setzen:

return fetch(url, {
  headers: {
    'Cache-Control': 'no-cache'
  }
}).then(function (res) {
  return res.json();
}).catch(function(error) {
  console.warn('Failed: ', error);
});
Agu Dondo
quelle
3

Keine der Lösungen schien für mich gut zu funktionieren, aber dieser relativ saubere (AFAICT) Hack hat funktioniert (angepasst von /webmasters/93594/prevent-browser-from-caching-text-file ) ::

  const URL = "http://example.com";
  const ms = Date.now();
  const data = await fetch(URL+"?dummy="+ms)
    .catch(er => game_log(er.message))
    .then(response => response.text());

Hiermit wird lediglich ein Dummy-Parameter hinzugefügt, der sich bei jedem Aufruf einer Abfrage ändert. Wenn andere Lösungen zu funktionieren scheinen, schlage ich auf jeden Fall vor, diese zu verwenden, aber in meinen Tests haben sie in meinem Fall nicht funktioniert (z. B. diejenigen, die Cache-Controlund verwenden pragram).

bbarker
quelle