问题描述
我正在尝试验证地址:
line1: Yup.string()
.test(
"Address Line 1 Validation Test","Please enter valid Line 1 address",async (line1: string) => {
let delayTimer = null;
let isValid = false;
const doSearch = () => {
clearTimeout(delayTimer);
delayTimer = setTimeout(async () => {
const { data } = await axios.get<{ status: string }>(
"https://maps.googleapis.com/maps/api/geocode/json?components=country:USA",{
params: {
address: line1,key: GEOCODE_API_KEY,},}
);
console.log("line1: ",line1);
console.log("data: ",data);
isValid = data.status === "OK" ? true : false;
},1000); // Will do the ajax stuff after 1000 ms,or 1 s
};
doSearch();
return isValid;
}
)
.required("Line 1 is required"),
我想像这样集成延迟搜索,这样我就不会每次用户输入这样的 api:AJAX: Delay for search on typing in form field
但每次用户输入时它都会执行 api 请求。我如何实施?
解决方法
问题在于您实际上从未清除超时。
每次运行处理程序时,都会创建和初始化新的 delayTimer
、isValid
和 doSearch
变量。这些变量必须放在外部作用域中。像这样:
let delayTimer = null;
let isValid = false;
Yup.string()
.test(
'Address Line 1 Validation Test','Please enter valid Line 1 address',async (line1: string) => {
clearTimeout(delayTimer);
delayTimer = setTimeout(async () => {
const {data} =
(await axios.get) <
{status: string} >
('https://maps.googleapis.com/maps/api/geocode/json?components=country:USA',{
params: {
address: line1,key: GEOCODE_API_KEY
}
});
console.log('line1: ',line1);
console.log('data: ',data);
isValid = data.status === 'OK';
},1000); // Will do the ajax stuff after 1000 ms,or 1 s
return isValid;
}
)
.required('Line 1 is required');
现在,即使这解决了您最初的问题,还有另一个问题需要解决。您的函数将始终返回带有错误值 isValid
的承诺。
你必须做什么取决于你想要什么,但我会给你以下见解:
let delayTimer = null;
let isValid = false;
let resolveRef = null;
Yup.string()
.test(
'Address Line 1 Validation Test',async (line1: string) => {
clearTimeout(delayTimer);
if (resolveRef) {
resolveRef(isValid);
resolveRef = null;
}
return await new Promise((resolve) => {
resolveRef = resolve;
delayTimer = setTimeout(async () => {
const {data} =
(await axios.get) <
{status: string} >
('https://maps.googleapis.com/maps/api/geocode/json?components=country:USA',{
params: {
address: line1,key: GEOCODE_API_KEY
}
});
isValid = data.status === 'OK';
resolve(isValid);
resolveRef = null;
},1000);
});
}
)
.required('Line 1 is required');
希望它有效。请告诉我。