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

原创已于 2022-02-18 17:07:18 修改 · 4.9k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#请求拦截 #取消请求 #取消上一个页面的请求 #vue #axios

于 2021-08-20 17:41:58 首次发布

vue 同时被 2 个专栏收录

75 篇文章

订阅专栏

axios

3 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用Vuex存储axios的取消函数数组，通过axios请求拦截器设置cancelToken，并在路由守卫中清空上一页面请求。详细讲解了state、mutations的配置和axios拦截器的实现，确保了跨页面请求的优雅管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心：

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