async函数阻止返回false工作

Question

我写了一个小插件来创建一个向导。每个向导步骤都是一个表单，点击"下一步"按钮即可。按钮，我想提交表单。我使用AJAX提交表单，我想等待AJAX完成，然后再进入下一步(如果AJAX成功)，或者停留在同一步骤(如果AJAX失败)。所以我使用async和await来实现这一点，这工作得很好。

问题出现了，因为我想在提交之前验证表单:如果验证失败，那么我return false并防止ajax提交。没有async和await，我有正常的行为，return false使向导停留在同一页面上。对于async和await则不会。 我的代码如下:

beforeNextStep: async function (currentStep) {
if($('#smartcheckin' + currentStep).valid()){ //form compilato correttamente
if ($('#documento_caricato' + currentStep).val() == '') { //documento non caricato
swal.fire('SmartCheckin', 'Devi caricare un documento per proseguire', 'warning');
$('#smartcheckin' + currentStep).submit(function () {
return false; //non sottometto il form
});
return false; //non avanzo allo step dopo
}else{
$('#smartcheckin' + currentStep).submit(function () {
return false; //non sottometto il form
});
data=$('#smartcheckin'+ currentStep).serialize();
//AJAX PER INVIARE IL FORM
return await $.ajax({
type: 'POST',
dataType:'JSON',
url: 'endpoints/checkin.php',
data: data,
})
.done(function(data){
if(data.status==200){
//le cose sono andate bene
Toast.fire({icon: 'success',title: 'Checkin effettuato correttamente'});
if(currentStep<allSteps){
return true;
}else{
location.href="thankyou.html?token="+token;
}
}else{
$.ajax({
"url": "/mantisbt/api/rest/issues",
"method": "POST",
"timeout": 0,
"headers": {
"Authorization": "3O4DtX_cwU9d57FRGdVhi6qCagUNFU1E",
"Content-Type": "application/json"
},
"data": JSON.stringify({
"summary": data.message.summary,
"description": data.message.description,
"additional_information": data.message.additional_information,
"project": { "id": 1, "name": "smartreservation"},
"category": {"id": 5, "name": "bugtracker"},
"handler": {"name": "lelio"},
"view_state": {"id": 10,"name": "public"},
"priority": {"name": "normal"},
"severity": {"name": "crash"},
"reproducibility": {"name": "sometimes"},
"sticky": false,
/* "custom_fields": [],
"tags": [] */
})
}).done(function(data){
Toast.fire({
icon: 'error',
title: 'Problemi a effettuare il checkin. Una segnalazione è stata aperta al nostro reparto tecnico'
});
});
return false; //non avanzo allo step dopo
}       
});
}
}else{
console.log('false returned');
return false; //form non valido non vado oltre
}
},

看第一个if:当验证返回false时，向导返回false。没有async和await，我从控制台看不到false returned消息

如何解决这个问题?编辑注意，async await部分本身工作得很好。如果表单验证没问题，await给出预期行为

插件代码如下:

beforeNextStep: function (t) {
return !0
},

，这样我就可以在每次运行时在客户端完全定制它。我应该让这也是一个异步函数吗?

编辑2:我定义这个函数的插件起始:

$("#mydiv").accWizard({
mode: displayMode,
//mode: 'wizard',
//autoButtons: true,
start: stepToDisplay, //lo step da cui partire
autoButtonsNextClass: 'btn btn-primary float-right',
autoButtonsPrevClass: 'btn btn-light',
stepNumberClass: 'badge badge-pill badge-primary mr-1',
beforeNextStep: async function (currentStep) {
if($('#smartcheckin' + currentStep).valid()){
... rest of my code here

Answer 1

对于您的用例，将返回false替换为抛出错误，并简单地像

那样处理它

try {
await beforeNextStep()
} catch {
// Fire error toast
}
// continue execution as if everything is okay

或者如果你想有相同的假逻辑，那么像这样做

const result = await beforeNextStep()
if (!result) { // check if false is returned
// Fire error toast
return // exit the function to stop further code execution
}
// continue execution as if everything is okay