vue3 antd validator校验防抖的问题

  • Z时代
  • 2024-02-11
  • 分类：IT

vue3 antd validator校验防抖的问题

因为要求是输入即校验，需要调用接口，所以需要防抖
因为callback已废除，必须以Promise的形式才能触发validator，一般的debounce不能满足返回Promise的需求

**现在的问题是：输入框不停输入时，以下代码防抖效果有了
但是因为每次输入都会把之前的那一次Promise取消掉，于是当我快速输入时，最后一次输入停了之后，其实是触发validator提示了，但是因为之前不停的在取消，所以页面来不及渲染，导致页面没有任何提示
如果是一个一个慢慢输入的话是能正常显示校验的**

请问有什么解决方法吗？？？

const abortPromise = (promise1) => {
  let abort
  const promise2 = new Promise((resolve, reject) => {
    abort = reject
  })
  const p = Promise.race([promise1, promise2])
  p.abort = abort
  return p
}
const debouncePromise = (success, fail, time) => {
  let promise
  return function(...rest) {
    if (promise && typeof promise.abort === 'function') {
      promise.abort()
    }
    const timeoutPromise = new Promise((resolve) => {
      setTimeout(() => {
        resolve(undefined)
      }, time)
    })
    promise = abortPromise(timeoutPromise)
    return promise.then(() => {
      return success(...rest)
    }, () => {
      return fail(...rest)
    })
  }
}
const fail = () => {
  console.log('由于防抖中断了第一次的请求')
  return Promise.resolve() // 忽视它暂时是正确的
}
const success = (rule, value, callback) => {
  console.log('请求后台接口')
  const reg = /^(?!(-|[-a-z0-9]*--|[-a-z0-9]*-$))[-a-z0-9]*[-a-z0-9]*$/
  if (value.length < 1) {
    return Promise.reject('名称不能为空')
  }
  if (value.length < 3 || value.length > 63) {
    return Promise.reject('请输入 3~63 个字符')
  } else if (!reg.test(value)) {
    return Promise.reject('只允许小写字母、数字、短横线（-），且不能以短横线开头或结尾')
  }
  // 调用接口查询是否重复
  return bucketNameCheck({
    bucketName: bucketInfo.bucketName
  }).then((res) => {
    if (res.available) {
      nameChecked.value = true
      return Promise.resolve()
    } else {
      // message.warning('该Bucket已存在，或被其他用户占用')
      return Promise.reject('该Bucket已存在，或被其他用户占用')
    }
  })
}
const check = debouncePromise(success, fail, 500)
const rule = {
  bucketNameRules() {
    return { validator: check, trigger: 'change', required: true }
  }
}

以上是 vue3 antd validator校验防抖的问题 的全部内容， 来源链接： utcz.com/p/937309.html

回到顶部