在 Ant Design Form 中，如何对可以请求的验证器进行 debounce？

编程问答 2022-05-10

问题描述

这是我的 FormItem 代码：​​

<FormItem label="用户名" hasFeedback
  name="username"
  rules={[
    {
      required: true,message: '不能为空！'
    },{
      // validator: this.validateUsername,validator: _.debounce(this.validateUsername,300),},]}
  validateFirst
>
  <Input placeholder="注册成功后用户名无法更改！" />
</FormItem>

如您所见，此 FormItem 有一个规则，用于验证是否使用了用户输入的用户名。所以 validator 需要询问服务器。这是validator：

validateUsername(rule,value) {
  if (value) {
    return new Promise((resolve,reject) => {
      fetch('/api/signup_check/username',{
        method: 'POST',headers: new Headers({
          'Content-Type': 'application/json',}),body: JSON.stringify({
          username: value,})
      })
        .then(res => {
          if (res.status === 200) {
            resolve();
          } else {
            res.text()
              .then(text => {
                reject(text);
              });
          }
        })
        .catch(err => {
          reject(err);
        });
    });
  }
}

但是这里有一个问题。在用户输入过程中，程序会频繁向后端发送请求。所以我决定使用 debounce 让程序在用户输入之后发送一个请求。但是我使用 debounce 的方式是错误的。有人知道如何正确使用 debounce 吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

antdantdantddebounce