日常开发会遇到一些 ,需要异步校验 ,这个时候就需要 使用防抖来控制调后端接口的次数。
主角 防抖
//防抖(基础版本)
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!!