【JS】Fetch APIが勝手にキャッシュを使用する件

現象

下記のような形でFetch APIを使用して、サーバから画像を取得していたのですが、なぜか毎回キャッシュした画像が取れてきていました。

fetch(filePath)
.then(response => response.blob()) 
.then(data => {
  ~処理~
});






問題

作成していたプログラムが、ユーザがアップロードした画像をサーバー側で加工してフォルダに保存⇒JSで取得(ファイルパスは固定)、というものでしたので、キャッシュした画像は取ってきてほしくありませんでした





connaiconnai

解決

調べてみるとFetch APIは第二引数に様々なオプションを持たせることができるようで、その中の一つにキャッシュの設定もありました。
下記のようにオプションとして cache:”no-store” を設定することで、キャッシュした画像を取得することをやめてくれました。

fetch(filePath,{cache: "no-store"})
.then(response => response.blob()) 
.then(data => {
  ~処理~
});







Fetch APIの他のキャッシュオプション

キャッシュオプションには他にも下記のようなものがあるようでして、

・default
・reload
・no-cache
・force-cache
・only-if-cached

こちらの記事にそれぞれのキャッシュオプションの説明が書いてあります。
https://ja.javascript.info/fetch-api#ref-1724






以上、Fetch APIが勝手にキャッシュを使用しないようにする方法でした。

コメント

タイトルとURLをコピーしました