Benachrichtigen Sie die API jede Minute, ohne sich auf das Neuladen durch den Benutzer verlassen zu müssen

Question

Das ist es, was ich jetzt habe. Auf meinem Mount() habe ich fetchCoins(), aber dadurch wird der API-Aufruf immer dann ausgeführt, wenn der Benutzer eine Aktualisierung durchführt

Ich versuche, eine API aufzurufen, die Daten im lokalen Speicher zu speichern und dann jede Minute die Daten abzurufen

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 存储在组件的数据中，以便最终能够清除它。