fetch(), comment faire une requête non mise en cache ?

Question

En utilisant fetch('somefile.json'), puis-je demander un fichier au serveur au lieu du cache du navigateur ? En d’autres termes, en utilisant fetch(), est-il possible de contourner le cache du navigateur ?

P粉731977554 · Answer

Plus facile à utiliser le mode cache :

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

Référence : https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/

P粉395056196 · Answer

Fetch peut obtenir un objet d'initialisation contenant de nombreux paramètres personnalisés que vous souhaiterez peut-être appliquer à votre demande, y compris une option appelée "En-têtes".

L'option "headers" prend un objet Header. Cet objet permet de configurer les en-têtes à ajouter à la requête.

En ajoutant pragma: no-cache et cache-control: no-cache dans les en-têtes, vous forcez le navigateur à vérifier le serveur pour voir si le fichier existe différemment de celui déjà dans le cache. Vous pouvez également utiliser cache-control: no-store car il ne permet tout simplement pas au navigateur et à tous les caches intermédiaires de stocker n'importe quelle version de la réponse renvoyée.

Voici un exemple de code :

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

ES6