【VUE】跳转页面，取消上个页面未完成请求

场景描述：
监控大屏翻页时并未取消上一页未返回数据的请求，在网速慢的时候下一页迟迟加载不出来
解决方案
跳转页面时取消上个页面未完成的请求
代码实现
1.request.js的request拦截器中：

service.interceptors.request.use(config => {
		......
  //取消请求
  config.cancelToken = new axios.CancelToken(function (cancel) {
    store.commit('pushToken', {cancelToken: cancel})
  })
  		......
   return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

2.store/index.js

const store = new Vuex.Store({
	state: {
    cancelTokenArr: [] // 取消请求token数组
  },
  mutations: {
    pushToken (state, payload) {
      state.cancelTokenArr.push(payload.cancelToken)
    },
    clearToken ({ cancelTokenArr }) {
      cancelTokenArr.forEach(item => {
        item('路由跳转取消请求')
      })
      cancelTokenArr = []
    }
  }
})

3.需要执行取消请求的位置

import store from '@/store'

store.commit('clearToken') // 取消请求

如有问题还请大佬们指正~~