con fetch('somefile.json') , ¿es posible solicitar que el archivo se obtenga del servidor y no del caché del navegador?
en otras palabras, con fetch() , ¿es posible eludir el caché del navegador?
Fetch puede tomar un objeto de inicio que contiene muchas configuraciones personalizadas que quizás desee aplicar a la solicitud, esto incluye una opción llamada "encabezados".
La opción de "encabezados" toma un objeto de encabezado . Este objeto le permite configurar los encabezados que desea agregar a su solicitud.
Al agregar pragma: no-cache y un control de caché: no-cache a su encabezado, obligará al navegador a verificar el servidor para ver si el archivo es diferente del archivo que ya tiene en el caché. También puede usar el control de caché: no almacenar , ya que simplemente no permite que el navegador y todos los cachés intermedios almacenen cualquier versión de la respuesta devuelta.
Aquí hay un código de muestra:
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>Espero que esto ayude.
Uso más fácil de los modos de caché:
// 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 */ });referencia: https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/
Puede configurar 'Cache-Control': 'no-cache' en el encabezado de esta manera:
return fetch(url, { headers: { 'Cache-Control': 'no-cache' } }).then(function (res) { return res.json(); }).catch(function(error) { console.warn('Failed: ', error); });