VueJS 每 20 分钟获取一次请求

Question

我从 get 请求中获取数据以显示硬币名称信息。 我希望它每 20 分钟更新一次。 对于试驾，我保持 500 毫秒。 它始终获取数据并添加当前列表，因此我Duplicate keys detected: 'BUSDRON'. This may cause an update error Duplicate keys detected: 'BUSDRON'. This may cause an update error ，并且我的应用程序会冻结。

我怎样才能每 20 分钟从上面的链接请求中获取数据，而不重复值？ 还有我的获取代码在这里

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

Answer 1

在 forEach 循环之前，将符号和价格的数组重置为空数组，然后在 forEach 循环内将新值推送给它们。

const response = await fetch(
    'https://api2.binance.com/api/v3/ticker/24hr'
  );
const data = await response.json();
const symbols = [];
const price = [];

data.forEach(element => {
  symbols.push(element.symbol);
  price.push(element.lastPrice);
});

this.chartData.symbols = symbols;
this.chartData.price = price;

Answer 2

使用lodash中的 uniqBy 删除重复项。

不确定唯一性是否基于最新数据。 为了安全起见，我们把数组倒过来。 过滤唯一日期后，我们再次按应有的顺序反转数组。

 methods: { async fetchApi() { const response = await fetch( 'https://api2.binance.com/api/v3/ticker/24hr' ); const data = await response.json(); this.chartData = _.uniqBy([...this.data, data].reverse(), 'symbols').reverse() } }