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

Question 1

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?

Question 2

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.

Question 3

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/

Question 4

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

Question 5

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).