[教程]如何避免API重复调用返回相同数据？

发布于 2024-08-25 10:10:33

136

如何避免API重复调用返回相同数据？你是否在网页开发中使用 setInterval 定时调用 API 时，遇到过即使时间间隔设置合理，API 响应仍然反复返回相同数据的情况？你可能尝试过调整代码顺序、...

如何避免API重复调用返回相同数据？

你是否在网页开发中使用 setInterval 定时调用 API 时，遇到过即使时间间隔设置合理，API 响应仍然反复返回相同数据的情况？你可能尝试过调整代码顺序、使用异步操作，但问题依然存在。别担心，你不是一个人！本文将深入探讨这个问题的根源，并提供有效的 JavaScript 解决方案，帮助你获取动态更新的 API 数据。

深入剖析问题

为了更好地理解问题，让我们先分析一段示例代码：

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}"`;
        }, ***0)
    })

这段代码的目标是每隔 8 秒从 API 获取一条新的建议并更新到页面上。然而，它存在一个致命缺陷：setInterval 的回调函数内部使用的 data 变量始终是第一次 API 调用获取的数据。这是因为 JavaScript 变量的作用域规则，setInterval 回调函数捕获的是 data 的初始值，而不是每次执行时 data 的最新值。

解决方案：让API调用“动”起来

为了解决这个问题，我们需要确保每次 setInterval 触发时，都能获取到最新的 API 数据。换句话说，我们需要将 API 调用代码移动到 setInterval 的回调函数内部。

以下是改进后的代码：

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

function fetchAdvice() {
  // 生成1-100之间的随机整数，确保每次请求的 slip_id 不同
  const slip_id = Math.floor(Math.random() * 100) + 1; 

  fetch(`https://api.adviceslip.com/advice/${slip_id}`)
    .then(response => response.json())
    .then(data => {
      const returnedAdvice = data.slip.advice;
      const idAdvice = data.slip.id;

      adviceNum.innerText = `ADVICE #${idAdvice}`;
      advice.innerText = `"${returnedAdvice}"`;
    })
    .catch(error => {
      console.error("获取数据时出错：", error);
    });
}

// 页面加载时调用一次，获取初始数据
fetchAdvice();

// 每隔8秒调用一次，获取最新数据
setInterval(fetchAdvice, ***0);

在这个改进版本中：

封装 API 调用: 我们将获取 API 数据和更新页面内容的逻辑封装到一个名为 fetchAdvice 的函数中。这样做不仅提高了代码可读性，也方便了后续的维护和修改。
随机数生成: 我们使用 Math.floor(Math.random() * 100) + 1 生成 1 到 100 之间的随机整数，确保每次请求的 slip_id 不同，避免 API 返回缓存数据。
错误处理: 我们在 fetch 的 catch 方法中添加了错误处理，以便在 API 请求失败时能够捕获并记录错误信息，提高代码的健壮性。
定时更新: 我们在 setInterval 的回调函数中直接调用 fetchAdvice 函数，保证每次都能获取到最新的 API 数据，并更新页面内容。