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

最新推荐文章于 2024-03-18 02:39:04 发布

原创最新推荐文章于 2024-03-18 02:39:04 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

技术（javascript）专栏收录该内容

114 篇文章

订阅专栏

本文介绍如何在Vue项目中通过Vuex状态管理与Axios库结合，实现路由跳转时自动取消未完成的HTTP请求。具体实现包括在Vuex中维护一个请求取消的Token数组，利用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()
})

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

1 条评论