循环定时请求接口工具类，添加到对应组件中接口处

目的

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

---

---

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 * 60000
    if(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为空
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2.在组件中使用

2.1 引入js工具类

import {
    interfaceTimer
  } from "../../utils/interfaceTimer";
1
2
3

2.2 data中定义定时器

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

2.3 定义methods

methods:{
	async demo(){
		......
	},
	async demo2(){
		......
	},
	async demo3(){
		......
	}
}
1
2
3
4
5
6
7
8
9
10
11

2.4 mounted中调用接口定时器

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

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

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