关于Vue路由切换时中断上一个路由请求情况的处理

开篇闲话

前两天做项目的时候遇到一个问题,那就是路由切换了但是上一个路由的请求依旧继续执行,导致页面卡顿,以及新的请求和之前请求一块发送非常影响性能。就想到了axios中可以使用cancelToken可以用来中断请求,于是记录下来以备不时之需(小白学习,还有很多不足,希望大佬可以指正!)

1、首先,由于我们要在store中对请求进行状态管理所以要在store中管理取消的请求操作 Store/index.js

在这里插入图片描述

2、然后在对axios进行二次封装,设置请求(request)和响应(response)的处理操作

(不要忘了导入store和导出axios,新手常犯得错误)axios.js
在这里插入图片描述

最后一步,就是监听路由切换,在路由表中设置路由守卫对路由进行监听,在路由切换时对上一个路由的请求进行中断

在这里插入图片描述

进行路由切换测试,如果看到如下结果,则证明路由请求中断成功

在这里插入图片描述
我也是借鉴大佬的写法,中间摸索了好久,至于原理还是很懵,只是处于实现业务逻辑的阶段。希望可以帮助到遇到类似问题的小伙伴
加油呀!

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页