vue 路由跳转取消正在pending的请求
现象:最近访问前端页面发现一个问题,在回退页面的时候,点得很快,就会突然跳到一个其他页面,如:访问时候顺序是:A–>B–>C–D,回退的时候,本应该是:D–>C–>A,但是你不耐烦就点得很快,回退跳转实际是:D–>C–>A–>C。原因:在C页面没刷新出来就又点击回退,而C页面还在请求(状态为pending),等你回退到A页面,C页面请求返回了,又跳到了C页
·
现象:
最近访问前端页面发现一个问题,在回退页面的时候,点得很快,就会突然跳到一个其他页面,如:访问时候顺序是: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
更多推荐
已为社区贡献1条内容
所有评论(0)