vue路由跳转时取消上一个页面的http请求

【应用场景】
用户进入app或者网站时，在首页数据还未请求加载完成直接进入二级页面，如果此时首页请求还在继续，难免会出现一些性能问题，所以一般项目中会在页面跳转时，取消上一个页面的http请求，此处以vue项目为例
【实现思路】
1.新建一个数组，放置需要取消的请求，我一般放在原型里
2.在拦截器里添加cancelToken属性

config.cancelToken = new axios.CencleToken(c => {
    
    
	Vue.protoType.cList.push(c)
}) 

3.当路由需要切换时，先判断数组中有没有需要取消的请求，然后在路由的beforeEach钩子函数批量取消

router.beforeEach((to, from, next) => {
    
    
	if(Vue.protoType.clList.length > 0){
    
    
		Vue.protoType.cList.forEach((cancel, index) => {
    
    
			cancel ()
			delete Vue.protoType.cList[index]
		})
	}else{
    
    
		next()
	}
}

【相关扩展】
前端终止http请求的几种方式
【原生js】 XMLHttpRequest.abort();
如果该请求已经发出，XMLHttpRequest.abort（）方法将终止请求，当请求被终止，他的readyState属性被置为0（0表示请求未初始化，还没有调用open()）

let xhr = new XMLHttpRequest(),
    method = "GET",
    url = "....";
xhr.open(method,url,true);
 
xhr.send();
xhr.abort(); 

【ajax】ajax.abort()

let queryTruckAjax;
if(queryTruckAjax){
    
    
    queryTruckAjax.abort();
}
queryTruckAjax =  $.ajax({
    
    
    type: "POST",
    url:url,
    dataType: "json",
    success: function(data) {
    
    
        do thing...
    },error: function () {
    
    
    }
}）

【axios】axios.cancelToken()
利用axios请求的config参数，向axios添加一个包含cancelToken的config配置对象

axios.get('....', {
    
    
          cancelToken: new CancelToken(c => {
    
    
            this.cancel = c
          })
        }).then(res => {
    
    
          this.items = res.data
        }).catch(err => {
    
    
          console.log(err)
        })

this.cancel()   

【微信小程序 】RequestTask.abort()；
【uni-app】 requestTask.abort();