异步函数正在阻止 return 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

如何解决这个问题？ 编辑：请注意，异步等待部分本身工作正常。所以如果表单验证没问题， 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

对于您的用例，将 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