vue定时请求

<template>
  <div>
    <!-- 显示请求结果 -->
    <div v-for="item in dataList" :key="item.id">{{ item.data }}</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      dataList: [], // 存储请求结果的数组
      intervalId: null, // 存储定时器ID
    };
  },
  created() {
    // 组件创建时开始定时请求
    this.startTimer();
  },
  destroyed() {
    // 组件销毁时清除定时器
    this.clearTimer();
  },
  methods: {
    startTimer() {
      // 设置定时器每隔一定时间请求数据
      this.intervalId = setInterval(this.fetchData, 5000); // 每5秒请求一次
    },
    clearTimer() {
      // 清除定时器
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },
    fetchData() {
      // 模拟请求数据的函数
      // 实际应用中，这里应该是发起网络请求的代码
      const newData = { id: Date.now(), data: '请求到的数据' };
      this.dataList.push(newData); // 将请求到的数据添加到数组中
    },
  },
};
</script>