web-dev-qa-db-fra.com

fetch (), comment faites-vous une requête non mise en cache?

avec fetch('somefile.json'), il est possible de demander que le fichier soit extrait du serveur et non du cache du navigateur?

autrement dit, avec fetch(), est-il possible de contourner le cache du navigateur?

javascripthtml5fetch-api
51
cc young

Fetch peut prendre un objet init contenant de nombreux paramètres personnalisés que vous voudrez peut-être appliquer à la demande. Cela inclut une option appelée "en-têtes".

L'option "en-têtes" prend un objet En-tête . Cet objet vous permet de configurer les en-têtes que vous souhaitez ajouter à votre demande.

En ajoutant pragma: no-cache et un cache-control: no-cache à votre en-tête, vous obligerez le navigateur à vérifier sur le serveur si le fichier est différent du fichier qu’il a déjà dans le cache. Vous pouvez également utiliser cache-control: no-store , car il empêche simplement le navigateur et tous les caches intermédiaires de stocker toute 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;
  });
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6</title>
</head>
<body>
    <img src="">
</body>
</html>

J'espère que cela t'aides.

75
burningfuses

Utilisation plus facile des modes de 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 */ });

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

55
MJ Vakili

Vous pouvez définir 'Cache-Control': 'no-cache' dans l'en-tête comme ceci ::

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