javascript - 异步函数正在阻止 return false 工作
问题描述
我写了一个小插件来创建一个向导。每个向导步骤都是一个表单,单击“下一步”按钮我想提交表单。我使用 AJAX 提交表单,我想等待 AJAX 完成后再进行下一步(如果 AJAX 成功)或留在同一步骤(如果 AJAX 失败)。所以我使用async
andawait
来实现这一点,这很好用。
出现问题是因为我想在提交之前验证表单:如果验证失败,那么我会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
来自控制台的消息
如何解决这个问题? 编辑:请注意,异步等待部分本身工作正常。因此,如果表单验证很好,则等待给我预期的行为
插件代码只是:
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
解决方案
对于您的用例,将 return 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
推荐阅读
- mysql - 如何用子表重命名分区表
- node.js - 需要帮助才能在我的代码中使用 api 响应
- macos - macOS 上的 Maven 安装失败
- laravel - 数组元素的自定义laravel验证器?
- wpf - WPF XAML 将 DataGridTextColumn 绑定到与源 ObservableCollection 项属性不同的位置
- c++ - 我如何解释这个错误、堆摘要、统一变量?
- javascript - 使用谷歌折线图实时移动x轴
- python - 如何使用 tensorflow 数据集训练神经网络?
- python - 在postgresql中插入列表作为奇异值
- swift - 准确性 Openweathermap 还是 Apple Watch?