web-dev-qa-db-ja.com

fetch（）、キャッシュされていないリクエストをどのように作成しますか？

fetch('somefile.json')を使用すると、ブラウザのキャッシュからではなく、サーバーからファイルを取得するように要求できますか？

言い換えると、fetch()を使用すると、ブラウザーのキャッシュを回避することは可能ですか？

javascripthtml5fetch-api
51
cc young

Fetch は、リクエストに適用したい多くのカスタム設定を含むinitオブジェクトを取ることができます。これには、「headers」というオプションが含まれます。

「headers」オプションは Header オブジェクトを取ります。このオブジェクトを使用すると、リクエストに追加するヘッダーを設定できます。

プラグマを追加することにより：no-cacheおよびacache-control：no-cacheヘッダーに対して、ブラウザがサーバーをチェックして、ファイルが既にキャッシュにあるファイルと異なるかどうかを確認します。また、cache-control：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>

お役に立てれば。

75
burningfuses

キャッシュモードのより簡単な使用：

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

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

55
MJ Vakili

次のようにヘッダーに'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);
});
10
Agu Dondo