antd自定义表单验证使用debounce请求接口无法反馈到表单下面，各位大佬有什么解决方法吗？

Question

题目描述

使用antd的自定义表单验证来请求后端接口查看是否字段重复，但是又不能太过频繁的请求，所以使用debounce，但是这样debounce会拿不到执行完的函数返回值，所以导致自定义表单验证的错误反馈不到输入框下面，各位大佬有什么办法帮忙改进下debounce或者别的方法能够让错误反馈到输入框下面吗

相关代码

antd表单自定义验证代码：

() => ({
  async validator(_, value) {
    return debounce(() => handleCheckUsername(value), 500)
  },
}),

handleCheckUsername：

  const handleCheckUsername = async (username) => {
    try {
      const res = await checkUsername({ username })
      if (res.success) {
        return Promise.resolve()
      }
      return Promise.reject(new Error(res.message))
    } catch (error) {
      console.log('🚀  handleCheckUsername  error', error)
    }
  }

debounce：

export const debounce = (() => {
  let timer = null
  return (callback, wait = 800) => {
    timer && clearTimeout(timer)
    timer = setTimeout(callback, wait)
  }
})()

你期待的结果是什么？实际看到的错误信息又是什么？

想要跟正常的rules验证一样，将错误反馈到输入框下面

但是由于debounce返回的是undefined，实际上错误只反馈到了控制台上

Answer 1

使用 debounce-promise

import debounce from 'debounce-promise'

const handleCheckUsername = async (username) => {
  try {
    const res = await checkUsername({ username })
    return !!res.success
  } catch (error) {
    console.log('🚀  handleCheckUsername  error', error)
  return false
  }
}

() => ({
  async validator(_, value) {
    if (!(await handleCheckUsername(value))) {
      throw 'invalid'
    }
  },
}, 500)

V4 validator使用debounce后表现异常 这个issue下面有解决方法