antd自定义表单验证使用debounce请求接口无法反馈到表单下面,各位大佬有什么解决方法吗?
题目描述
使用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,实际上错误只反馈到了控制台上
回复
1个回答

test
2024-07-11
使用 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下面有解决方法
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容