vue 路由跳转丢弃所有请求

路由跳转丢弃请求

当项目中请求很慢的时候，然后当我们离开页面的时候，如果请求还未回来，那么我们可以通过，拦截请求的方式节省流量和带宽。

1、在main.js中添加一个数组储存路由状态

这个网上更多方法是放在vuex中,这里如果访问不到可以放在main.js的最上面

window._axiosPromiseArr = []

2、在axios的请求拦截器中添加

service.interceptors.request.use(
  (config) => {
    if (localStorage.getItem("token")) {
      // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.token = localStorage.getItem("token");
    }

	 //这一段是重点
    config.cancelToken = new axios.CancelToken(cancel => {
      //  这个我习惯放再window 里面。
      window._axiosPromiseArr.push({ cancel })

    })
    return config;
  }

3、在main.js中的路由守卫中配置

router.beforeEach((to, from, next) => {

  window._axiosPromiseArr.forEach((el, index) => {

    el.cancel() // 路由跳转之前，中止请求

    //  重置 window._axiosPromiseArr
    delete window._axiosPromiseArr[index]

  })
  next();
})