【vue+element-ui】前端实现轮询

- 需求

在管理系统中实现前端每隔5秒调用后端的轮询接口，进行轮询。

- 实现

          this.timer=window.setInterval(() => {
                setTimeout(() => {
                 api.setControlResult(id).then((res) => {
                     if (res.data.code == '500') {
                    	 this.$msgByResponse(res.data);
                    	 clearInterval(this.timer);
                     }
                  }
                }, 1)
              }, 5000)

api.setControlResult()是调用后端轮询接口，id是传入的参数。 在轮询中判断，当code返回500时可以结束轮询并弹出提示信息。
同时，在页面销毁时也要结束轮询（也就是跳转页面结束轮询），写在生命周期函数destroyed中：

 destroyed() {
      clearInterval(this.timer);
  }

这么写可以实现基本功能，但当同时开启两个及以上的轮询，就会无法判断该关闭哪个轮询。

- 进阶版实现

let timerArr=[];
let data = {
              timer: window.setInterval(() => {
                		setTimeout(() => {
                 			 this.createSetInterval(id);
              		    }, 1)
		              }, 5000), 
              value: id
            };
 timerArr.push(data);

创建一个数组timerArr，用来存放每个轮询及它的唯一标识id。data{ }由轮询和唯一标识id组成。每当开启一个轮询时，就把这个轮询及它的id组成的data{ }push进timerArr中。createSetInterva()是封装好的调用后端轮询接口的方法。

createSetInterval(id) {
      api.setControlResult(id).then((res) => {
        if (res.data.code == '500' ) {
          for (var i = 0; i < timerArr.length; i++) {
            if (timerArr[i].value == id) {
              window.clearInterval(timerArr[i].timer);
              this.$msgByResponse(res.data);
              timerArr.splice(i, 1);
              break
            }
          }
          return
        }
      })
    },

那么如何停止轮询呢？
当code返回500时，遍历整个timerArr数组，找到唯一标识id相同的那一个轮询，停掉它，并将这一项从timerArr中删除。
当然，当页面销毁时，也要停掉所有轮询：

  destroyed() {
    for (var i = 0; i < timerArr.length; i++) {
      clearInterval(timerArr[i].timer);
    }
  },

这样的实现方式有没有问题还需要大佬们指正~~