这就是我现在所拥有的。 在我的 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);
},
}
您需要在 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 存储在组件的数据中，以便最终能够清除它。