目的

在一个数据可视化页面中，请求接口的数据随着时间的增长是一直变化的，页面不可能只请求一次接口，所以需要大量的接口进行每隔一段时间自动请求更新数据，这样就需要一个工具类直接实现，#简单便捷#

文章目录

• 目的
• 1.在utils文件夹下新建interfaceTimer.js文件
• 2.在组件中使用
• • 2.1 引入js工具类
  • 2.2 data中定义定时器
  • 2.3 定义methods
  • 2.4 mounted中调用接口定时器
  • 2.5 在组件销毁，也就是切换其他页面关闭定时器

1.在utils文件夹下新建interfaceTimer.js文件

state负责创建/销毁定时器， fun请求方法数组， time为几分钟请求一次后台数据， timer是组件里定义的定时器数组，开始为空，当每个接口的定时器放入后返回给组件，最后销毁的时候传入，否则清除定时器命令无效

最后一个参数timer很重要，需要父组件去负责汇总定时器，而不能是js函数里面（这个问题浪费了我一下午，才找见这个原因），具体实现如下：

/*** @param {boolean} state 状态（开始定时器/结束定时器）* @param {array} fun 请求函数* @param {number} time 定时时间（默认分钟）* @param {array} timer 定时器数组（有多个接口对应多个定时器）*/
export function interfaceTimer(state,fun, time = 1, timer=[]) {//一分钟为60000毫秒，以分钟为单位请求数据time = time * 60000if(state){//true,启动定时器for (let i = 0; i < fun.length; i++) {// 遍历接口fun[i]() // 第一次进入默认执行一次接口请求timer[i] = setInterval(() => { //timer[i]对应的每个定时器对应名称fun[i]() //循环依序调用fun数组中接口}, time)}return timer //返回给组件定时器名称}else{//false清除定时器//循环定时器名称for (let i = 0; i < timer.length; i++) {clearInterval(timer[i]) //依次关闭定时器}timer = null //关闭完后，设置timer为空}
}

2.在组件中使用

2.1 引入js工具类

import {interfaceTimer} from "../../utils/interfaceTimer";

2.2 data中定义定时器

data() {return {timerInterface: [] //接口定时器名称数组};},

2.3 定义methods

methods:{async demo(){......},async demo2(){......},async demo3(){......}
}

2.4 mounted中调用接口定时器

 var interfacearr = [this.demo,this.demo2,this.demo3] //将我们请求后台数据的函数都放到一个数组里面this.timerInterface = interfaceTimer(true,interfacearr,1,this.timerInterface) //用当前组件中的state中timerInterface接收组件名

2.5 在组件销毁，也就是切换其他页面关闭定时器

  beforeDestroy() {console.log('銷毀前',this.timerInterface);//【12，34，56】interfaceTimer(false,[],1,this.timerInterface)//flase代表清除定时器this.timerInterface = null; //最后将timerInterface置为空},