I am retrieving data from an API endpoint to display information about coin names. I would like this information to update every 20 minutes, but for testing purposes, I have set it to refresh every 500 milliseconds. However, my current approach of fetching data continuously and appending it to the existing list is causing a problem with duplicate keys, specifically 'BUSDRON'. This has resulted in errors and freezing issues in my app.
How can I modify my fetch logic to only retrieve new data from the API link every 20 minutes without duplicating values? Below are the methods I am currently using:
methods: {
async fetchApi() {
const response = await fetch(
'https://api2.binance.com/api/v3/ticker/24hr'
);
const data = await response.json();
await data.forEach(element => {
this.chartData.symbols = [...this.chartData.symbols, element.symbol];
this.chartData.price = [...this.chartData.price, +element.lastPrice];
});
},
}
data: () => ({
timer: '',
)}
async created() {
this.loaded = false;
try {
this.timer = setInterval(this.fetchApi, 500);
this.loaded = true;
} catch (e) {
console.error(e);
}
},