web-dev-qa-db-ja.com

JavaScript Axios / Fetchを使用します。ブラウザのキャッシュを無効にできますか？

React.jsに更新するfreeCodeCampプロジェクトの引用APIを照会しようとしています。 FetchまたはAxiosを使用してAPIを照会しようとしていますが、ブラウザーで応答をキャッシュしています。ブラウザに新しいリクエストを強制する$ajaxが{ cache: false }にあることを知っています。

FetchまたはAxiosで同じことができる方法はありますか？

cache-control設定は、Axiosによって既にmax-age: 0に設定されているようです。

enter image description here

これは、APIを照会する私のコードです。

generateQuote = () => {
  axios.get('https://quotesondesign.com/wp-json/posts?filter[orderby]=Rand&filter[posts_per_page]=1')
    .then(response => {
      const { title, content, link } = response.data[0];
      console.log(title, content, link)
      this.setState(() => ({ title, content, link }));
    })
    .catch(err => {
      console.log(`${err} whilst contacting the quote API.`)
    })

}

javascriptreactjsfetchaxios
6
Asjas

さて、解決策を見つけました。新しい呼び出しを行うには、API URLにタイムスタンプを設定する必要がありました。 axiosまたはfetchに強制的にキャッシュを無効にする方法はないようです。

これは私のコードがどのように見えるかです

axios.get(`https://quotesondesign.com/wp-json/posts?filter[orderby]=Rand&filter[posts_per_page]=1&timestamp=${new Date().getTime()}`)
  .then(response => {
    const { title, content, link } = response.data[0];
    console.log(title, content, link)
    this.setState(() => ({ title, content, link }));
  })
  .catch(err => {
    console.log(`${err} whilst contacting the quote API.`)
  })
21
Asjas

Axiosを呼び出すたびにURLを変えるだけでいいと思います。タイムスタンプはそのための1つの方法にすぎません。また、PWAを開発している場合は、Service Workerのキャッシュ方法の無効化またはフィルタリングを検討してください。

0
Al Herrera