每分鐘通知 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 儲存在元件的資料中，以便最終能夠清除它。