vue定时任务引发的问题

问题原因

vue中定义了一个定时任务来定时刷新渲染前台数据

created: function(){
	this.intervalRunningTime = setIntval(() => {
			this.refresh();      //调用刷新接口
		},5000)                  //每隔5秒刷新一次
	}
},

由于后台接口请求第三方应用超时，无法及时返回数据，导致前台http请求一直处于pending状态，并且不断创建新的http请求。

导致的后果

由于谷歌浏览器最多同时支持6个ajax请求，超过6个以后的请求都被挂起，处于pending状态。通过F12中的Network->选中http请求->Timing可以看到，http请求在Stalled状态占用时间过长，短时间内无法响应。

及，在定时任务没有销毁之前，严重影响其他功能的正常使用。

解决方案

去掉定时任务，改为当上一个请求完成后再进行下一次请求。

话不多说，上代码：

data(){
	return {
		isRefreshStart: true,
		timeout: 0
	},
	created: function(){
		this.getData();
	},
	beforeDestroy: function(){
		this.isRefreshStart = false;
		this.$Notice.destroy();
	},
	methods: {
		getData(){
			this.$axios.get("yours url")
			.then((response) => {
				...//省略其它操作
				this.sleep();
			})
			.catch((response) => {
				...
			})
		},
		refresh(){
			this.$axios.get("yours refresh url")
			.then((response) => {
				...//省略其它操作
				this.sleep();
			})
			.catch((response) => {
				...
			})
		},
		sleep(){
			if(this.timeout != 0){
				window.clearTimeout(this.timeout);
			}
			if(this.isRefreshStart){
				this.timeout = setTimeout(() => {
					this.refresh();
				}, 5000);	
			}
		},
	}
}

至此，前台请求不会累加，问题解决