试图每分钟一次调用API，而不是在用户重新加载时

Question

这就是我现在拥有的。 在我的安装（）上，我有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)
   }

您需要将呼叫更改为this.fetchcoins（）在已安装的函数中。

但是请记住，有关此片段有几个警告（出于问题的范围）：

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