现象:
最近访问前端页面发现一个问题,在回退页面的时候,点得很快,就会突然跳到一个其他页面,如:访问时候顺序是:A–>B–>C–D,回退的时候,本应该是:D–>C–>A,但是你不耐烦就点得很快,回退跳转实际是:D–>C–>A–>C。
原因:
在C页面没刷新出来就又点击回退,而C页面还在请求(状态为pending),等你回退到A页面,C页面请求返回了,又跳到了C页面。。。。

要解决这个,有一种方法就是“路由跳转取消正在pending的请求”,
1、 services.js文件,请求拦截器加:

// request 请求拦截器
axios.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(function (cancel) {
      store.commit('pushToken', {cancelToken: cancel})
    })
    return config
  }
)

2、store/index.js文件,使用vuex新建一个取消请求数组:

state:{
 	cancelTokenArr: [] // 取消请求token数组
},
mutations:{
    pushToken (state, payload) {
      state.cancelTokenArr.push(payload.cancelToken)
    },
    clearToken ({ cancelTokenArr }) {
      console.log(cancelTokenArr);
      cancelTokenArr.forEach(item => {
        if(item){
          item('路由跳转取消请求')
        }
      })
      cancelTokenArr = []
    },
    emptyToken (state, payload) {
      state.cancelTokenArr = []
    }
  },

3、main.js文件,路由拦截器:

/* 路由拦截器 */
router.beforeEach((to, from, next) => {
  // 路由跳转,取消上一页面处于 pending 的网络请求
  store.commit('clearToken'); // 取消请求
  store.commit('emptyToken'); // 清空token数组
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next()
});

参考:
1、路由跳转时放弃正在pending的请求 https://www.pianshen.com/article/7832107117/#axioscancelToken_68
2、vue路由跳转取消上个页面的请求
https://www.e-learn.cn/topic/3585591

Logo

前往低代码交流专区

更多推荐