前端防重

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()
    }

 

文字工具

转换工具

便民查询

开发工具

其它工具

随机推荐