vue实现接口定时刷新方法的封装与使用

参考：
Vue项目中实现接口的定时刷新

utils/publicFun.js

    /**
     * 定时刷新接口
     * @param: callback: 回调函数
     * @param: time: 刷新时间
     * @param: firstExecution: 是否是第一次执行（默认第一次不执行callback）
     * @return: callback(清除定时器)
     * @author: mhf
     * @time: 2024-03-26 10:17:14
     **/
    export function refresh(callback, firstExecution = true, time = 1000 * 1 * 5) {
      let timer = null;
      const intervalFn = () => {
        if (!firstExecution) { // 若非首次执行，则立即执行回调函数
          callback();
        } else {
          firstExecution = false; // 设置为非首次执行
        }
        timer = setTimeout(intervalFn, time);
      };
    
      timer = setTimeout(intervalFn, firstExecution ? time : 0); // 首次等待时间间隔，后续立即执行
    
      return () => clearTimeout(timer); // 返回清除定时器的函数
    }

使用

    data() {
        return {
            refreshTimer: null
        }
    }
    
    methods: {
        initBasicData() {
            ...初始化基础数据
        },
            
    	getChatsData() {
        	...你的接口
        },
        
    } 
    
    
    created() {
        this.initBasicData();
        this.refreshTimer = refresh(this.getChatsData)
    },
          
    destroyed() {
        this.refreshTimer()
    },