始终获取 api return 相同的数据

Question

每次单击我的一个按钮时，我都会触发对 adviceslip API 的调用以获取 advice 数据。我希望有效载荷会有所不同。但是每次调用后都返回完全相同的数据。

我尝试调用 getAdvice 函数作为回调，但没有成功。

我是不是漏掉了什么？

'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()
})

Answer 1

缓存似乎存在问题，来自网页的多个时间间隔很近的请求会导致返回相同的结果。如果我向 URL 添加一个唯一变化的值来阻止这样的缓存：

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

然后，我每次都得到一个独特的回应。

我尝试发送各种 headers 来禁用缓存而不是 t=xxx hack，但是那些 headers 触发了 CORs 错误并且 fetch() 没有成功，因为像这样的自定义 headers 不会通过“简单”CORS 请求的测试，因此需要目标站点不支持的 pre-flight。因此，每个请求的 xxx 不同的 ?t=xxx 似乎可以解决问题。

Answer 2

我找到了这个并且对我有用。添加 const response = await fetch("https://api.adviceslip.com/advice", { cache: "no-cache" });

始终获取 api return 相同的数据

Fetch api return same data always

javascript

fetch-api