问题
I am trying to query a quote API for a freeCodeCamp project I'm updating to React.js. I am now trying to use Fetch
or Axios
to query the API but it's caching the response in the browser. I know in $ajax
there is a { cache: false }
that would force the browser to do a new request.
Is there some way I will be able to do the same with Fetch
or Axios
?
The cache-control
setting seems to be already set to max-age: 0
by Axios
.
This is my code I have that is querying the 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.`)
})
}
回答1:
Okay so I found a solution. I had to set a timestamp on the API url to get it to make a new call. There doesn't seem to be a way to force axios
or fetch
to disable cache.
This is how my code now looks
axios.get(`https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1×tamp=${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.`)
})
回答2:
I think you just need to make the url different each time you make the axios call. Timestamp is just one way to do so. Also consider disabling or filtering service workers caching method if you are developing a PWA.
来源:https://stackoverflow.com/questions/49263559/using-javascript-axios-fetch-can-you-disable-browser-cache