head-img Force's Blog

vue 路由切换前关闭api pending请求

JavaScript

现象:
最近访问前端页面发现一个问题,在回退页面的时候,点得很快,就会突然跳到一个其他页面,如:访问时候顺序是: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()
});

————————————————
版权声明:本文为CSDN博主「_Delores_」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/lvshu_yuan/article/details/112320937

点我评论
打赏本文
二维码


106

文章

12

标签

 访客统计  Update-0206-11:00

 网站信息