axios 切换路由中断之前的请求

222 阅读1分钟

需求:

切换到其它页面后,上一个页面的未完成的请求应该清除掉。

例如A页面有多个请求,分别需要10s, 切到B页面时,B页面数据就会很久不出来,因为A页面在占用请求,会导致B页面请求变慢

处理:

axios 可以在发送请求的时候带一个标志,然后你可以在任何地方调这个标志的方法来中断这个请求。

方式一:(要记得引入axios)

image.png

方式二(推荐):

image.png

实操:

1、在vuex或者pinia 中定义一个数组,

2、每次请求生成的标志就放到这个数组中,

3、然后在路由切换的时候,遍历调用这个数组方法,指的是每个标志+(),去调用,调用axios就自己取消了

4、再清空这个数组,

5、注意:如果终止请求后,请求是会进入response函数中的fail函数的

image.png 可以在配置这里统一设置,或者的接口那里设置

image.png 中断请求会有:axios.isCancel() // 会进入fail函数

image.png

image.png 在路由切换的时候进行清空