防止对 api 响应进行相同的调用

Question

我正在学习使用 API 调用，我试图让我的 API 响应不会一遍又一遍地返回相同的数据，目前，尽管使用了 setInterval，但它确实如此，我已经尝试更改顺序并使其异步，但是我目前不知道如何改变这一点。

这个想法是在页面加载时对 API 进行原始调用，然后在大约 6 秒后再次进行调用，但会自动更改响应，从而更改 setInterval。

这是我的代码：

const advice = document.getElementById("advice");
const adviceNum = document.getElementById("adviceNum");

const slip_id = Math.random() * 100;
console.log(slip_id)

fetch(`https://api.adviceslip.com/advice/${slip_id}`)
    .then(response => {
        return response.json();
    }) 
    .catch(error => {
        console.log(error);
    })
    .then(data => {
        console.log(data);
        const returnedAdvice = data.slip.advice;
        console.log(returnedAdvice);
        const idAdvice = data.slip.id;
    
        adviceNum.innerText = `ADVICE #${idAdvice}`;
        advice.innerText = `"${returnedAdvice}"`;

        setInterval(() => {
            console.log(data);
            const returnedAdvice = data.slip.advice;
            console.log(returnedAdvice);
            const idAdvice = data.slip.id;
    
            adviceNum.innerText = `ADVICE #${idAdvice}`;
            advice.innerText = `"${returnedAdvice}"`;
        }, 8000)
    })

非常感谢您对我在这里做错的事情提供帮助！

Answer 1

当前您正在发出获取请求，当数据从该单个请求返回时；你console.log等

请尝试以下操作，将您的获取请求包装在 setInterval 中

  setInterval(async function(){
    const data = await fetch(`https://api.adviceslip.com/advice/${slip_id}`);
    // check your response 
    // compute your values 
    // add them to the dom
  }, 8000);