Maklumkan API setiap minit tanpa bergantung pada muat semula pengguna

Question

Ini yang saya ada sekarang. Di Mount () saya, saya mempunyai fetchCoins() tetapi ini membuat panggilan API apabila pengguna menyegarkan semula

Saya cuba memanggil API, data disimpan dalam storan tempatan dan kemudian dapatkan data setiap minit

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

Anda perlu menjejaki tarikh dalam localStorage apabila pengambilan terakhir berlaku. Berikut adalah contoh pelaksanaan:

   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)
   }

Anda perlu berada dalam panggilan mounted 函数中更改对 this.fetchCoins() fungsi tersebut.

Tetapi sila ingat bahawa terdapat beberapa kaveat tentang coretan kod ini (di luar skop soalan):

• setTimeout 和 setInterval bukan fungsi masa yang tepat sepenuhnya. Mereka mungkin ditangguhkan selama beberapa milisaat. Jika anda bimbang tentang ralat seperti ini, lihat beberapa soalan lain yang mencadangkan penyelesaian, seperti yang ini.
• Coretan kod ini hanya berfungsi untuk satu contoh komponen. Mencipta berbilang komponen akan mengakibatkan keadaan perlumbaan di mana coin-info-last-fetch ditulis.
• Tiada apa-apa yang boleh menghalang gelung pengambilan, walaupun komponen itu musnah. Anda perlu menyimpan ID tamat masa yang dikembalikan oleh setTimeout dalam data komponen supaya anda akhirnya boleh mengosongkannya.