form表单 异步校验 防抖

日常开发会遇到一些 ，需要异步校验 ，这个时候就需要 使用防抖来控制调后端接口的次数。

主角 防抖

//防抖(基础版本)
const debounce = (fn: any, delay = 500) => {
    return (...rest: any) => {
      let args = rest;
      if (timer) clearTimeout(timer);
      setTimer(
        setTimeout(() => {
          fn.apply(this, args);
        }, delay),
      );
    };
  };

异步校验方法

const MaterialPromise = (code: any) => {
    console.log(code, 'code');
    return new Promise((resolve: any, reject: any) => {
      getMaterialCode({ productId: code }) //异步调用
        .then((res: any) => {
          const { data } = res;
          console.log(data);
          if (!data) {
            resolve('网络异常');
          }
          if (data.code !== '0000001') {
            resolve(data.desc);
          }
          resolve('success');// 成功返回
        })
        .catch(e => {
          reject(e);
        });
    });
  };

const checkMateriCode = async (rule: any, value: any, callback: any) => {
    console.log('----------------------校验-------------------');
    if (!value) {
      return callback('请输入数值');
    }
    let reg = /^[A-Z0-9]+$/;
    if (!reg.test(value)) {
      return callback('请输入正确格式大写字母及数字');
    }
    const res = await MaterialPromise(value); //异步校验(拉出去单独)
    if (res === 'success') {
      callback();
    } else {
      callback(res);
    }
    callback();
  };

万事齐备只欠东风  调用 校验防抖

<Form.Item
            name="MaterialCode"
            label="参数"
            rules={[
              {
                required: true,
                validator: debounce(checkMateriCode, 2000), //调用防抖方法 组合
              },
              // { required: true, validator: checkMateriCode },
            ]}
          >
            <Input placeholder="请输入原物料代码"/>
          </Form.Item>

以上自己的 操作  如有更好的 请分享  

thank!!