vue3 项目每10秒请求接口的实现方法

<script lang="ts" setup>

import { ref,onUnmounted } from "vue";
import { getAgreementInfo } from "@/api";
import { ElMessage,ElLoading  } from "element-plus";

const listData = ref([]);
const timer = ref(); // 定时器
let num = ref(0); // 倒计时

const getDataList = async () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  const { data } = await getAgreementInfo();
  if (data.length > 0) {
    listData.value = data;
    num.value = 10;//成功时设置num.value = 10;并调用 meterTimeFn 新一轮的倒计时
    loading.close()
    meterTimeFn();
  } else {
    loading.close()
    clearInterval(timer.value);
    ElMessage({
      message: "暂无数据",
      type: "warning",
    });
  }
};
//循环请求接口
const meterTimeFn = () => {
  timer.value = setInterval(() => {
    if (num.value > 0 && num.value <= 10) {
      num.value--;
    } else if (num.value === 0) {
      getDataList();// 请求数据 
      clearInterval(timer.value);
      timer.value = null;
    }
  }, 1000);
};

onUnmounted(()=>{
  clearInterval(timer.value);
  timer.value = null;
})
</script>