vue实现vant,element前端防止反复发送请求主要有两种实现方式：
1、弹出加载窗口，遮挡点击按钮。如vant框架在按钮点击发起请求后，弹个Toast，显示等待数据，等请求数据返回了将Toast清除掉。
deviceAdd() {
let _self = this
if(!_self.parmData.deviceCode) {
Toast('请输入打印机终端编号')
return
}
if(!_self.parmData.deviceName) {
Toast('请输入打印机名称')
return
}
Toast.loading({
message: '添加中...',
forbidClick: true,
})
let postData = {
deviceCode: _self.parmData.deviceCode,
deviceName: _self.parmData.deviceName,
//token: localStorage.getItem('Authorization'),
longitude: '',
latitude: '',
}
bindDevice(postData).then(res => {
Toast.clear()
if(res.code == 0) {
Toast.success('成功')
_self.$router.push({ path: '/device' })
} else if(res.code == 30004) {
Toast('终端编号已被绑定，请联系客服')
} else {
Toast(res.msg)
}
}).catch(()=>{
console.log('error')
})
}2、按钮禁用掉。在按钮点击发起请求后，将按钮禁用掉，同样等数据返回了将按钮禁用解除。
<van-button type="default"
:disabled="!isUsable"
:class="[unUsableClass, isUsable ? usableClass:'']"
size="large"
@click="getAfsCheck">获取验证码</van-button>
goNextStep() {
let _self = this
if(!_self.parmData.verifyCodeToken) {
_self.parmData.verifyCodeToken = _self.parmData.verifyCode
}
let postData = {
verifyCode: _self.parmData.verifyCode,
verifyCodeToken: _self.parmData.verifyCodeToken
}
_self.isUsablePhoneCode = true
checkVerifyCode(postData).then(res=>{
if(res.code == 0) {
_self.isUsablePhoneCode = false
_self.isDisplayOne = false
_self.isDisplayTwo = false
_self.isDisplayThree = true
} else {
// 验证码错误
Toast(res.msg)
}
}).catch()
}