VUE路由跳转前清除所有请求

VUE路由跳转前清除所有请求

 //axios.js 文件
 // http请求拦截器
const CancelToken = axios.CancelToken;

axios.interceptors.request.use(
    config => {
    
    
        config.cancelToken = new CancelToken(function executor(c) {
    
    
            pending.push({
    
    
                url: axios.defaults.baseURL + config.url,
                f: c
            });
            store.commit("pushToken", {
    
     cancelToken: c });
        });
        return config;
    },
    error => {
    
    
        return Promise.reject(error).catch(err => {
    
    });
    }
);

// vuex.js 文件

		import Vuex from 'vuex';
		
		const state = {
    
    
		    cancelTokenArr:[] //取消请求token数组
		};
		
		const mutations = {
    
    
		    pushToken(state,payload){
    
    
		        state.cancelTokenArr.push(payload.cancelToken);
		    },
		    clearToken({
     
     cancelTokenArr}){
    
    
		        cancelTokenArr.forEach(
		            item=>{
    
    
		                if(item){
    
    
		                    item();
		                }
		            }
		        )
		        cancelTokenArr = [];
		    },
		    emptyToken(state,payload){
    
    
		        state.cancelTokenArr = [];
		    }
		};
		// 提交mutations 可包含异步操作 this.$store.dispatch(actionName)
		const actions = {
    
    };
		
		export default new Vuex.Store({
    
    
		    state,
		    actions,
		    mutations
		});

// router.js   路由配置文件

import Router from "vue-router";
import store from "@/store";
import {
    
     routerMode } from "@/public/env-conf";
import Portal from "./portal-router";

const router = new Router({
    
    
    mode: routerMode,
    routes: [
        ...Portal, // 门户
    ]
});

router.beforeEach((to, from, next) => {
    
    
    // 路由跳转，取消上一页面处于pending的网络请求
    store.commit("clearToken"); //取消请求
    store.commit("emptyToken"); // 清空token数组
    } else {
    
    
        next();
    }
});

export default router;