开篇闲话

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

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

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

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

(不要忘了导入store和导出axios,新手常犯得错误)axios.js
关于Vue路由切换时中断上一个路由请求情况的处理

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

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

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

关于Vue路由切换时中断上一个路由请求情况的处理
我也是借鉴大佬的写法,中间摸索了好久,至于原理还是很懵,只是处于实现业务逻辑的阶段。希望可以帮助到遇到类似问题的小伙伴
加油呀!

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-26
  • 2022-12-23
  • 2021-10-28
猜你喜欢
  • 2022-01-24
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-10
  • 2022-12-23
  • 2021-07-14
相关资源
相似解决方案