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 }
  }
}
阅读 1.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题