vue路由跳转前取消之前的请求

项目中通常会遇到在发送请求中用户去跳转路由或做一些返回操作, 在network中会发现, 之前处于pending状态的请求仍然存在, 这样就会对web性能造成一定的影响。这时，我们就希望取消之前的请求操作

解决方案：使用axios的一个方法CancelToken()，同时监听路由，在路由切换前将之前的请求取消

配置：
一、请求拦截

// 定义存放取消请求的标识
window._axiosPromiseArr = []
axios.interceptors.request.use(config => {
	iView.LoadingBar.start()
	config.cancelToken = new axios.CancelToken(function (cancel) {
		window._axiosPromiseArr.push({cancel})
    })
	/* if (Cookies.get('session')) {
		config.headers.common['Authorization'] = 'Bearer ' + Cookies.get('session')
	} */
	if (!config.url.match(RegExp(/http/))) {
		config.url = process.env.API_ROOT + config.url
	}
	return config
})

二、路由拦截器（router/index）

// 路由拦截器
router.beforeEach(function (to, from, next) {
	console.log(window._axiosPromiseArr)
	if(window._axiosPromiseArr === undefined) {
		window._axiosPromiseArr = []
	}
	// 循环缓存的请求 取消标识数组 取消所有关联的请求
	window._axiosPromiseArr.forEach((ele, index) => {
		// 失败函数中返回自定义错误信息
		ele.cancel('请求取消')
		delete window._axiosPromiseArr[index]
	})
	next()
})

如图：