正在为antd自定义验证器规则添加延迟

Question

我如何添加一些延迟或某种返回promise的验证器的去抖动。我正在使用Antd及其Form组件。无论数据库中是否已经存在用户名，我的自定义验证器都会向服务器发送一个请求。

医生说要还钱，所以我就这么做了。

rules={[
      { required: true, message: "Please input your username!" },
      ({ getFieldValue }) => ({
        validator(rule, value) {
          return new Promise((resolve, reject) => {
            api.post("/users/check", { username: value }).then(response => {
              if (response.data.exist) {
                reject("Username already exists.");
              } else {
                resolve();
              }
            });
          });
        }
      })
    ]}

它工作得很好，但问题是，每次击键都会向服务器发送一个请求，但我认为这对服务器和客户端都不好。所以我想到的是一些延迟，比如debounce或setTimeOut，但它们都不起作用。我使用lodash的debounce函数。

 return new Promise((resolve, reject) => {
  debounce(() => {
    api
      .post("/users/check", { username: value })
      .then(response => {
        if (response.data.exist) {
          reject("Username already exists.");
        } else {
          resolve();
        }
      });
 }, 500);

我希望应该有一个请求发送到服务器，但我从来没有看到服务器的请求。

我想我错过了什么。希望有人能回答。

谢谢。

Answer 1

如本答案所述

在处理promise 时，应避免使用Lodash提供的去抖动功能

因此您可以使用另一个库：

import React from "react";
import { Form, Input, Button } from "antd";
import debounce from "debounce-promise";
const request = debounce(() => {
  console.log("request called");
  return Promise.resolve({ data: { exist: true } });
}, 500);
const Demo = () => {
  const [form] = Form.useForm();
  const onFinish = () => {
    console.log("Submit success!");
  };
  const onFinishFailed = () => {
    console.log("Submit failed!");
  };
  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        name="url"
        label="URL"
        rules={[
          ({ getFieldValue }) => ({
            validator(rule, value) {
              return new Promise((resolve, reject) => {
                request("/users/check", { username: value }).then(
                  (response) => {
                    if (response.data.exist) {
                      reject("Username already exists.");
                    } else {
                      resolve();
                    }
                  }
                );
              });
            }
          })
        ]}
      >
        <Input placeholder="input placeholder" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};