BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] fetch()で、キャッシュされないリクエストをする方法は？

2022-11-21 05:43:41

質問

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

言い換えれば fetch() で、ブラウザのキャッシュを回避することは可能なのでしょうか？

どのように解決するのですか？

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

headers" オプションは ヘッダー オブジェクトを受け取ります。このオブジェクトにより、リクエストに追加したいヘッダを設定することができます。

を追加することで 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>

これが役立つといいのですが。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します