vue路由跳转取消上个页面的请求

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

第一步：

　　axios请求头设置　　

import axios from 'axios'
import { store } from './store'    // 引入vuex
axios.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(function (cancel) {
      store.commit('pushToken', {cancelToken: cancel})
    })
    return config
  }
)

　　第二步：

　　利用vuex，新建一个store.js，将取消方法cancel放到数组中，然后在路由守卫中把数组中存有的cancel方法都执行

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
  state: {
    cancelTokenArr: [] // 取消请求token数组
  },
  mutations: {
    pushToken (state, payload) {
      state.cancelTokenArr.push(payload.cancelToken)
    },
    clearToken (state) {
      state.cancelTokenArr.forEach(item => {
        item('路由跳转取消请求')
      })
      state.cancelTokenArr = []
    }
  }
})

　　第三步：

　　监听路由　　

router.beforeEach(function (to, from, next) {
  store.commit('clearToken') // 取消请求
  next()
})

https://my.oschina.net/u/4309525/blog/3281330
http://www.axios-js.com/zh-cn/docs/#取消

以上是 vue路由跳转取消上个页面的请求 的全部内容， 来源链接： utcz.com/z/375554.html

回到顶部