Contents
現象
下記のような形でFetch APIを使用して、サーバから画像を取得していたのですが、なぜか毎回キャッシュした画像が取れてきていました。
fetch(filePath)
.then(response => response.blob())
.then(data => {
～処理～
});問題
作成していたプログラムが、ユーザがアップロードした画像をサーバー側で加工してフォルダに保存⇒JSで取得（ファイルパスは固定）、というものでしたので、キャッシュした画像は取ってきてほしくありませんでした
解決
調べてみると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が勝手にキャッシュを使用しないようにする方法でした。
コメント