每分钟通知 API，无需依赖用户重新加载

Question

这就是我现在所拥有的。 在我的 Mount() 上，我有 fetchCoins()，但这使得每当用户刷新时，就会调用 API

我正在尝试调用API，数据存储在本地存储中，然后每分钟获取一次数据

methods: {
    async fetchCoins() {
      const response = await fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage=1h");
      const data = await response.json();
      this.coins = this.coins.concat(data);
    },

    setData() {
      localStorage.setItem('coin-info', JSON.stringify(this.coins))
    },

    getData() {
      let get = localStorage.getItem('coin-info', []);
      this.coins = JSON.parse(get);
      console.log(this.coins);

      setInterval(() => {
        this.fetchCoins()
      }, 60000);
    },
}

Answer 1

您需要在 localStorage 中跟踪上次获取发生的日期。这是一个示例实现：

   scheduleNextFetchCoins() {
       const lastFetch = new Date(localStorage.getItem('coin-info-last-fetch'));
       
       const timeDelta = Date.now() - lastFetch.valueOf();
       const nextCall = Math.max(60000 - timeDelta, 0);
       
       setTimeout(() => {
           this.fetchCoins();
           localStorage.setItem('coin-info-last-fetch', new Date());

           this.scheduleNextFetchCoins();
       }, nextCall)
   }

您需要在该函数的 mounted 函数中更改对 this.fetchCoins() 的调用。

但请记住，关于此代码片段有一些警告（超出了问题的范围）：

• setTimeout 和 setInterval 并不是完全准确的时间函数。它们可能会延迟几毫秒。如果您担心这种错误，请查看其他一些提出解决方案的问题，例如这个。
• 此代码片段仅适用于组件的单个实例。创建多个组件将导致写入 coin-info-last-fetch 的竞争条件。
• 没有什么可以阻止获取循环，即使组件被销毁也是如此。您需要将 setTimeout 返回的超时 ID 存储在组件的数据中，以便最终能够清除它。