从promise返回值(异步验证表单)

Question

这是我在这里的第一篇文章，请原谅我的英语。下面是我遇到的问题：当我使用外部API提交表单时，我试图验证用户的地址我的目标是防止表单基于异步定义的变量提交(这就是错误(。我想以某种方式从异步函数返回一个变量(在向API发出基于promise的请求后重新定义变量(。这是代码：

function validateAdress(requestString) {
callToTheAPIMethod(request).then((res) => {
let error;
const obj = res.getDataFromApi ...obj data from async call
const precision = ...parameters from an API on which i rely in order to set up the error message
if (obj) {
switch (precision) {
case "exact":
error = "";
break;
case "number":
case "near":
case "range":
error = "Adress is incorrect. Please specify house number";
break;
case "street":
error = "Adress is incorrect. Please specify house number";
break;
case "other":
default:
error = "dress is incorrect. Please specify smth...";
}
} 
$(".address_error").text(error);
return error;
});
} 

function validateForm() {
validateAdress(requestString)
if (validateAdress(requestString) return false 
///i get it that i am not able to return the variable directly from this call, only a promise to resolve
/// if error is not empty prevent form from submitting
...some other code validating input fields
}

结果，错误变量被分配了一个指定错误类型的文本字符串，并被添加到DOM中validateAppart函数在其他用于验证客户端表单的函数中被调用。问题是，如果变量错误被分配了一个值，我试图阻止表单提交在我看来这是不可能的。如果我试图从validateDress函数返回该变量，那么它显然返回了未定义的。。。不幸的是，我也不能在这里使用async/await语法。。如果有人能给我一个如何实现这种功能或如何访问错误变量的提示，我将不胜感激。

Answer 1

您可以在表单提交处理程序上调用preventDefault，调用异步函数，如果一切正常，则调用表单submit方法。

例如。。

const form = document.querySelector('form');
const input = document.querySelector('input');
function check(done) {
setTimeout(() => {
done(input.value === '1');
}, 1000);
}
form.addEventListener('submit', e => {
e.preventDefault();
check(ok => {
if (ok) form.submit();
else console.log('try again.');
});
});

Type 1 into input and press enter, and wait 1 second..
<form>
<input />
</form>