如何在 onclick 属性中返回异步函数的值？

Question

此函数返回Promise。

async function validateStudent(event, reg, pass) {
if (reg != '' || pass != '') {
var res = await requestStudent(reg, pass);
if (res == null) {
document.getElementById("error").innerText = "Invalid username or password.";
return false;
}
else {
document.getElementById("HiddenField1").value = res;
return true;
}
}
else {
document.getElementById("error").innerText = "Please fill in the form.";
return false;
}
}

如果我想将其用作事件处理程序，那么在不使用onclick属性中的另一个async函数的情况下，如何获得其真实值？我想这样使用这个功能：

<button onclick="return validateStudent('abc', '123')">Send</button>

我尝试过使用return Promise.resolve(validateStudent('abc', '123'))，但没有成功。

Answer 1

这里的问题似乎是您试图让按钮的内联onclick处理程序尊重并等待承诺，而这在目前看来是不可能的。

因此，你将不得不稍微改变你的方法才能实现你的目标。您可以在获得有效的promise响应时以编程方式触发表单提交，而不是使用默认的按钮行为来实现这一点。

更改处理程序代码以返回void，因为您不再试图修改默认按钮行为：

async function validateStudent(event, reg, pass) {
if (reg != '' || pass != '') {
var res = await requestStudent(reg, pass);
if (res == null) {
document.getElementById("error").innerText = "Invalid username or password.";
}
else {
document.getElementById("HiddenField1").value = res;
document.getElementsByTagName("form")[0].submit(); // Add this line to submit form after hidden input is filled
}
}
else {
document.getElementById("error").innerText = "Please fill in the form.";
}
}

最后将您的按钮更改为以下内容：

<button type="button" onclick="validateStudent('abc', '123')">Send</button>

请注意，我添加type="button"是为了避免默认的表单提交行为(如果省略按钮类型，则在表单上下文中，默认情况下它将变为type="submit"(。我还删除了return，因为按钮的onclick不再关心返回值。