vue页面跳转取消上一个页面请求

核心：

1：vuex以数组的形式存放取消函数；
2：axios请求拦截中设置cancelToken；
3：页面跳转路由守卫取消上一个页面所有的请求。

vuex中

在vuex中设置一个存放取消函数的数组，还有一个添加数组元素的方法和清空数组的方法：

这里放到了自定义的home模块：

export default {
   
/**
* 定义命名空间，防止多个模块同名共享，使用时需要带上命名空间
*/
    namespaced: true,
    state: {
   
        _axiosPromiseArr:[],
    },
    mutations: {
   
        add_AxiosPromiseArr(state, item) {
   
            console.log("添加_axiosPromiseArr");
            state._axiosPromiseArr.push(item)
        },
        clear_AxiosPromiseArr(state) {
   
            console.log("_axiosPromiseArr情空");
            state._axiosPromiseArr = []
        },
    },
}

axios的拦截：

import axios from 'axios'
import store from '../../store/index'

let Ajax = axios.create({
   
    baseURL: "http://127.0.0.1:3003/",
    timeout: 50000
})
Ajax.interceptors.request.use(async config => {
   

  //重点：重点：重点：重点：重点：重点：重点：重点：重点：
    config.cancelToken = new axios.CancelToken(cancel => {
   
        store.commit('home/add_AxiosPromiseArr', {
    cancel })
    })
  //重点：重点：重点：重点：重点：重点：重点：重点：重点：


    return config;
}, error => {
   
    return Promise.reject(error);
});
Ajax.interceptors.response.use(response => {
   
    return response.data;
}, error => {
   
    return Promise.reject(error);
});
const getTIP = (url, params) => {
   
    Ajax.defaults.headers['token'] = localStorage.getItem('token')
    return new Promise((relove, reject) => {
   
        Ajax.get(url, {
    params, responseType: "arraybuffer", headers: {
    responseType: 'arraybuffer' } }).then(res => relove(res)).catch(err => reject(err))
    })
}
export default {
   
     getTIP
}

路由守卫：

router.js

router.beforeEach((t, f, n) => {
   
    store.state.home._axiosPromiseArr.forEach((ele, index) => {
   
        ele.cancel("跳转页面,结束请求") // 路由跳转之前，清空（终止）上一个页面正在请求的内容
    })
    store.commit('home/clear_AxiosPromiseArr')
    if (t.path.includes('login') || t.path.includes('zjq')) {
   
        n()
    }
    if (!localStorage.getItem('token')) {
   
        n('/login')
    } else {
   
        n()
    }
})