vue 跳转路由取消axios网络请求

来到你的vuex封装文件

export default {
    state: {
        cancelTokenArr: [] // 取消请求token数组
    },
    mutations: {
        pushToken: (state, src) => {
            state.cancelTokenArr.push(src.cancelToken)
        },
        clearToken: ({cancelTokenArr}) => {
            cancelTokenArr.forEach(item => {
                item('路由跳转取消请求')
            })
            cancelTokenArr = []
        }
    }
}

来到你axios封装文件

// http request 拦截器
client.interceptors.request.use(
    config => {
        // vuex记录cancelToken
        config.cancelToken = new axios.CancelToken((cancel) => {
            store.commit('pushToken', {
                cancelToken: cancel
            })
        })
        return config
    },
    error => {
        return Promise.reject(error)
    })

// http response 拦截器
client.interceptors.response.use(
    response => {
        return response
    },
    error => {
        // console.log(error)
        if (error.message === '路由跳转取消请求') { // 判断是否为路由跳转取消网络请求
            console.log('路由跳转取消请求' + error)
        } else {
            return Promise.reject(error)
        }
    })

来到你路由封装文件

router.beforeEach(({ meta, path, fullPath }, from, next) => {
    store.commit('clearToken')// 取消请求
    next()
})