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

Posted 2021-09-07 六卿

核心：

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()
    }
})