Fetch api return same data always

Question

Every time one of my button is clicked, I trigger a call to the adviceslip API to get an advice data. I expect the payload to vary. But the exact same data is returned after each call.

I've tried to call getAdvice function as a callback but it didn't work.

Am I missing something?

'use strict'

const title = document.querySelector('.advice-title')
const desc = document.querySelector('.advice-text')
const btn = document.querySelector('.btn')



const getAdvice = async () =>{
    try{
        const response = await fetch('https://api.adviceslip.com/advice');
        if (!response.ok){
            throw new Error('Api connection problem')
        }
        const responseJson = await response.json();
        const data = responseJson.slip;

        const id = `ADVICE #${data.id}`;
        const advice = `"${data.advice}"`;

        title.textContent = id;
        desc.textContent = advice;

    }
    catch (e) {
        console.error(e)
    }

}



btn.addEventListener('click', () => {
    getAdvice()
})

It seems to mostly work here: jsfiddle.net/jfriend00/xbjdp5qz. The source of the data does not appear to return different data if you make two closely spaced requests. But, with a small delay between requests I get a different response each time. — jfriend00
– jfriend00, Commented Feb 24, 2022 at 17:31
The occasional duplicates look like it may be a caching problem. If I change the URL to 'https://api.adviceslip.com/advice?t=' + Math.random(), I get a unique response every time. — jfriend00
– jfriend00, Commented Feb 24, 2022 at 17:33
OK, updated the jsFiddle here with the t=xxx fix: jsfiddle.net/jfriend00/a6yzvqsj — jfriend00
– jfriend00, Commented Feb 24, 2022 at 17:59

jfriend00 · Accepted Answer · 2022-02-24 17:55:46Z

2

There appears to be an issue with caching where multiple requests closely spaced in time from a web page will cause the same result to come back. If I add a uniquely changing value to the URL to defeat caching like this:

const response = await fetch('https://api.adviceslip.com/advice?t=' + Math.random());

Then, I get a unique response every time.

I experimented with sending various headers to disable caching instead of the t=xxx hack, but those headers trigger a CORs error and the fetch() does not succeed because custom headers like this don't pass the test for a "simple" CORS request and thus require pre-flight which the target site does not support. So, the ?t=xxx where xxx is different on each request seems to do the trick.

answered Feb 24, 2022 at 17:55

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marcos Fitzsimons · Accepted Answer · 2022-04-12 18:03:04Z

1

I found this and it worked for me. Add const response = await fetch("https://api.adviceslip.com/advice", { cache: "no-cache" });

answered Apr 12, 2022 at 18:03

Marcos Fitzsimons

113 bronze badges

Collectives™ on Stack Overflow

Fetch api return same data always

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related