做表单提交的时候遇到一个问题:表单以及其他的数据提交,如果连续点击提交按钮,不做处理的话会导致同一个表单提交多次到数据库。

一开始想到这个问题,简单,在data函数中定义一个变量然后绑定到按钮的disable属性中

点击提交按钮后把disable设为true,这样就会禁用按钮了,然后发出请求提交数据后在回调函数中再把disable改为false

大功告成!

但是问题来了
如果后端出现问题导致数据提交失败呢?

由于我在拦截器里加了判断,如果发生错误,程序是不会走到callback函数的,callback函数里处理的主要是提交成功后的提示以及跳转到其他页面,如不设拦截即使提交数据失败也走这个函数显然会有问题,而且其他页面也有用到这个封装好的request方法,所以取消拦截不可取。

所以会出现的现象是:提示用户页面出现问题导致提交未成功,然后因为没有执行callback函数所以按钮的状态还是disable。然而我想实现的是
只是防止用户提交多次,无论提交成功与否,我都希望在用户点击提交之后按钮的状态还是可点击的。

遂到网上看一下别人是怎么处理的
sendComment () { this.disabled = true if (this.text == '') { this.$message({
type: 'error', message: '输入内容不能为空', }) this.disabled = false } else {
this.$post('/xx/xx/IdleGoodsComment', { goods_id: this.$route.params.id,
content: this.text, user_id: window.uId, type: 1 }).then((res) => { if (res) {
this.getDetail() setTimeout(() => { this.disabled = false this.getCommentList()
this.text = '' } , 2000) this.disabled = true } }) } }
好的,问题解决了,无论成功与否,我的按钮还是会返回到可点击的状态。

但是,又想到一个新的问题,
如果碰到一些网速较慢还有些调皮的用户呢?
点击提交需要好几秒,但我只设了两秒就会返回可点击的状态,然后该用户看到还没提交成功按钮又可以点击了,嗯那我再点一下,然后又回到最初的问题,还是可以提交多次。

不过看到上面的代码,也因此想到一个方法,既然也是用的promise,那我把修改状态的代码放到promise的finally方法中去不就可行了?(finally
方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。)感觉可行,试一下,用着好像没什么问题。

样式调整,去掉之前的disable,使用vant的Toast组件,点击按钮在发请求前加上Toast组件
Toast.loading({ message: '正在提交,请勿重复操作', forbidClick: true, //是否禁止背景点击
loadingType: 'spinner', duration: 0, //展示时长(ms),值为 0 时,toast 不会消失 }); request({
url: '/care/create', method: 'post',
然后在finally里清除掉Toast
finally(() => { Toast.clear(); });
代码
else { Toast.loading({ message: '正在提交,请勿重复操作', forbidClick: true, loadingType:
'spinner', duration: 0, }); request({ url: '/care/create', method: 'post',
data: { id: this.id, title, }, }).then(() => { Dialog.alert({ message: '提交成功!',
}).then(() => { this.$router.push('/appointments'); }); }).catch(() => {
}).finally(() => { Toast.clear(); });

技术
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信