背景:
前端的表单提交功能,理论上是点击一次请求一次接口也就提交一次,无奈测试会按住鼠标一直点击。然后也就一直向后端发送数据,前端也会显示多个提交成功的提交。影响体验。测试提出要一段时间内只可以提交一次。直接使用状态判断。
解决:
在全局data函数中定义一个状态变量,如下:
在提交函数中通过变换subFlag
变量的状态控制提交测次数。如下:
submitSetting() {
if (this.subFlag) {
this.subFlag = false // 进入提交函数状态就变为false
this.addSystemConfig(this.systemConfig).then(
() => {
this.subFlag = false
this.$message({
showClose: true,
message: '提交成功',
type: 'success'
})
// 一次提交成功后,2s后subFlag 变为true,此时点击提交按钮才会执行接口请求函数
setTimeout(() => {
this.subFlag = true
}, 2000)
}
).catch(() => {
console.log('提交失败')
})
}
}
此时是2s请求一次接口。