关于vue中axios防止重复提交的办法

vue+axios是大家常用的一个套路,但是在使用过程中难免会有很多问题,这篇文章只是单纯的从侧面解决重复提交的。

网上很多大佬都分享的方法

关于vue中axios防止重复提交的办法_第1张图片

关于vue中axios防止重复提交的办法_第2张图片

两段代码放在axios的配置文件中,貌似就可以的,但是小编测试还是会有问题,当你的提交数据量过小,还是会多次提交给后台,参数多条数据,为此小编苦恼好久,后面想到一个过渡的办法,也就是在调取接口的时候,增加loading效果(蒙层)

关于vue中axios防止重复提交的办法_第3张图片

loading用的是element-ui组件中的组件,这样就会在每次发送请求的时候,会给页面增加loading,可以从侧边避免重复点击,完了再这里去掉loading

关于vue中axios防止重复提交的办法_第4张图片

至于小编增加settimeout,是为了避免网速过快,loading会出现闪烁的问题,希望对遇到同样问题的铜须有帮助

你可能感兴趣的:(前端,学习,vue)