vue3中创建一个轮询获取接口数据的hooks

在hooks中

• 定义一个获取类并创建一个定时器使用的timer变量
• 在类中定义一个定时器函数, 并将接口函数和一个用于在vue中显示数据的回调函数作为参数
• 定义关闭定时器的函数

// 实时轮询接口获取
export default class setData {
  timer: number | null = null;
  async getPortReal<T>(fn: Promise<T>, onDataUpdate: (data: T) => void) {
    this.timer = window.setInterval(async () => {
      fn.then((res: any) => {
        if (res.status === 200) {
          onDataUpdate(res.data);
        }
      });
    }, 3000);
  }

  // 关闭定时器
  closeSetInterVal() {
    if (this.timer !== null) {
      window.clearInterval(Number(this.timer));
      this.timer = null;
    }
  }
}

在vue中

• 引入hooks的类, 并初始化
• 在onMounted中调用类中的getPortReal函数并在回调函数中进行数据赋值或处理
• 在onBeforeUnmount中调用类中关闭定时器函数, 在离开页面前关闭定时器

import setData from '@/hooks/getPortRealTimePolling';
let setDataClass = new setData();
onMounted(() => {
  // 轮询参考1
  setDataClass.getPortReal(api.home.getBannerList(), (data) => {
    console.log(data, '轮播图数据轮询');
  });
});
onBeforeUnmount(() => {
  setDataClass.closeSetInterVal();
});