vue中路由跳转取消上一路由（页面）的请求

项目开发过程中经常遇到一种问题，就是进入某个页面，然后由于网速的原因，请求的接口迟迟不响应或是进入某个页面然后直接返回，但是请求还在继续着，等在某个页面浏览时，你要是做了全局的错误请求的拦截的话，你的请求因失败忽然弹出提示，便显得那么的不合时宜，明明当前页没有错误。那么怎样解决或优化请求呢。

解决思路：

graph TD
发起请求 --> 将请求存取起来 ---> 页面变化 --->取消请求

下面跟着我一起来实践 第一种，适合项目里没有使用vuex的 1、设置存储数组

// mian.js
Vue.prototype.$axiosPromiseArr = [];

2、设置请求拦截

import Vue from 'vue'
import axios from 'axios'

//在发送请求设置cancel token
axios.interceptors.request.use(config => {
  config.cancelToken = new axios.CancelToken(function (cancel) {
    Vue.prototype.$axiosPromiseArr.push({
      cancel
    });
  })
  return config
}, err => {
  return Promise.reject(err);
})

3、 监听路由变化清除请求

router.beforeEach(function (to, from, next) {
  Vue.prototype.$axiosPromiseArr.forEach((ele, index) => {
    ele.cancel();
    delete Vue.prototype.$axiosPromiseArr[index];
  });
  next()
})

另一种方案大同小异，只不过项目中用了vuex的更适合 1、设置请求拦截

import axios from 'axios'
import { store } from './store'    // 引入vuex
 
axios.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(function (cancel) {
      store.commit('pushAxiosPromise', {cancelToken: cancel})
    })
    return config
  }
)

2、vuex中设置清空方法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
  state: {
    axiosPromiseArr: [] // 取消请求数组
  },
  mutations: {
    pushAxiosPromise (state, payload) {
      state.axiosPromiseArr.push(payload.cancelToken)
    },
    clearToken ({ cancelTokenArr }) {
      axiosPromiseArr.forEach(item => {
        item.cancel();
      })
      axiosPromiseArr = []
    }
  }
})

3、监听路由变化

router.beforeEach(function (to, from, next) {
    store.commit('clearToken') // 取消请求
    next()
})

结束语：关注我，少走弯路! 创作不易，转载请注明出处！