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);
},
}
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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和setIntervalbukan 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.coin-info-last-fetchditulis.setTimeoutdalam data komponen supaya anda akhirnya boleh mengosongkannya.