108

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

つまり、fetch()ブラウザのキャッシュを回避することは可能ですか?

4

4 に答える 4

133

Fetchは、リクエストに適用できる多くのカスタム設定を含む init オブジェクトを取得できます。これには、「ヘッダー」と呼ばれるオプションが含まれます。

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

pragma: no-cacheとcache-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>

お役に立てれば。

于 2015-03-25T03:12:45.393 に答える