fetch (), як зробити некешований запит?

Question 1

за допомогою fetch('somefile.json'), можна вимагати отримання файлу з сервера, а не з кешу браузера?

іншими словами, за допомогою fetch(), чи можна обійти кеш браузера?

Question 2

Fetch може взяти об'єкт init, що містить багато власних налаштувань, які ви можете застосувати до запиту, це включає опцію, яка називається "заголовки".

Параметр "headers" бере об'єкт Header . Цей об'єкт дозволяє налаштувати заголовки, які ви хочете додати до свого запиту.

Додавши pragma: no-cache та cache-control: no-cache до вашого заголовка, ви змусите браузер перевірити сервер, чи не відрізняється файл від файлу, який він уже має в кеші. Ви також можете використовувати кеш-контроль: no-store, оскільки він просто забороняє браузеру та всім проміжним кешам зберігати будь-яку версію повернутої відповіді.

Ось зразок коду:

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>

Розгорніть фрагмент

Сподіваюся, це допомагає.

Question 3

Простіше використання режимів кешування:

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

посилання: https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/

Question 4

Ви можете встановити 'Cache-Control': 'no-cache'в заголовку так:

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

Question 5

Здавалося, жодне з рішень не спрацювало для мене добре, але цей відносно чистий (AFAICT) хак справді спрацював (адаптовано з /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());

Це просто додавання фіктивного параметра, який змінюється при кожному виклику запиту. Безумовно, якщо інші рішення працюють, я пропоную використовувати їх, але в моїх тестах вони не працювали в моєму випадку (наприклад, ті, що використовують Cache-Controlта pragram).