场景如下:
表单填写完成后,快速点击两下提交按钮,vue中调用了2次该接口访问,这个问题,有没有高手有解决办法的,最好能够一劳永逸,因为一个项目有很多个这样的场景。在线等待。
我想要达到的目的:
1.快速点击提交按钮是用户误操作,因此,只调用一次接口。
2.由于类似的提供功能较多,是否有办法能够有个公共的处理方法,统一处理(这里我暂时没有思路)。
场景如下:
表单填写完成后,快速点击两下提交按钮,vue中调用了2次该接口访问,这个问题,有没有高手有解决办法的,最好能够一劳永逸,因为一个项目有很多个这样的场景。在线等待。
我想要达到的目的:
1.快速点击提交按钮是用户误操作,因此,只调用一次接口。
2.由于类似的提供功能较多,是否有办法能够有个公共的处理方法,统一处理(这里我暂时没有思路)。
点击后将button的disabled
设置为true
,接口成功后再设置为false
。
使用element-ui的话, 可以设置'loading',给button加个加载圈圈,接口调用成功后loading
设置为false
可以搜索一下 防抖
和 截流
更新了问题, 补充一下
快速点击提交按钮是用户误操作,因此,只调用一次接口。
这种情况, 一般是给按钮加一个 锁
, 用户点击第一次就上 锁
, 请求成功后再解锁. 可以配合 截流
函数, 规定多少时间内只能提交一次.
这篇文章介绍了防抖和截流. 防抖你应该用不上. 截流可以拿来用用
5 回答7.2k 阅读✓ 已解决
5 回答8.2k 阅读
2 回答10.3k 阅读✓ 已解决
2 回答12.6k 阅读✓ 已解决
2 回答10.5k 阅读✓ 已解决
1 回答5.1k 阅读✓ 已解决
4 回答6.1k 阅读
请求方法加锁。
以下代码来自于一个旧回答,题主要求是不同组件同时调相同接口均能返回,但只发一个请求。
你的需求改改就行。
没有封装请求方法的,可以劫持xhr来避免多处修改