时间戳

首页 > 解决方案 > 使用异步功能时如何防止关闭引导箱？

javascript - 使用异步功能时如何防止关闭引导箱？

问题描述

我想要得到的是，如果用户收到任何验证错误，那么 bootbox 将显示“这是必需的”。到现在为止，我已经做到了。但主要问题是 - 如果用户单击“是”按钮，它会关闭启动框窗口。我得到这个是因为我不得不在引导箱中使用 g异步回调。出于这个原因，即使在返回false之后，引导箱也在关闭。但我希望用户在按下取消按钮之前显示该框。如果他们单击Yes，那么它应该显示验证，并打开该框。这是我的代码：

bootbox.confirm({
    message: 'Test',
    buttons: {
        confirm: {
            label: 'Yes',
            className: 'btn-primary'
        },
        cancel: {
            label: 'No',
            className: 'btn-danger'
        }
    },
    callback: async function (result) {
        var isValid = $('#form').valid();
        if (result && !isValid) {
            return false; //it's not working. It's closing the bootbox
        }
        if (result && isValid) {
            /* for this await function I had to use async callback,
               without this bootbox is opend
            */
            var data = await self.createData();
            $.ajax({
                type: "POST",
                success: function (result) {

                },
            }).then(function () {
            });
        }
    }
});

我该如何解决这个问题？

标签： javascriptjquerypromisecallbackbootbox

解决方案

在我看来，它对您尝试使用bootbox.confirm()的回调没有任何形式的支持。async当您的回调返回时引导箱关闭，await除非您明确返回，否则您将在第一次点击时关闭false，但async回调函数总是返回一个未明确返回的承诺false。你无法改变这一点。

您可以做的是使您的回调成为常规回调函数，而不是在验证失败async时返回false，然后创建一个嵌入式async函数，您可以在其中使用await您从第一个回调中调用的函数，如下所示。请注意，引导箱将在您的异步代码完成之前关闭，因此如果引导箱代码中有任何错误，您将需要以新的方式呈现这些错误，也许是建立一个新的引导箱。这是在仍然使用await.

bootbox.confirm({
    message: 'Test',
    buttons: {
        confirm: {
            label: 'Yes',
            className: 'btn-primary'
        },
        cancel: {
            label: 'No',
            className: 'btn-danger'
        }
    },
    callback: function (result) {
        var isValid = $('#form').valid();
        if (result) {
            if (!isValid) {
                // keep prompt open until user presses Cancel
                return false;
            }

            async function run() {
                const data = await self.createData();
                const result = await $.ajax({ ... });
                // do something with result
            }
            // now call async function here (dialog will close)
            run().catch(err => {
                // do something with an error here
                console.log(err);
            });
        }
        return true;
    }
});

或者，您可以避免使用await并且只使用.then()and.catch()然后您就不需要这个额外的功能层：

bootbox.confirm({
    message: 'Test',
    buttons: {
        confirm: {
            label: 'Yes',
            className: 'btn-primary'
        },
        cancel: {
            label: 'No',
            className: 'btn-danger'
        }
    },
    callback: function (result) {
        var isValid = $('#form').valid();
        if (result) {
            if (!isValid) {
                // keep prompt open until user presses Cancel
                return false;
            }

            self.createData().then(data => {
                return $.ajax({ ... }).then(result => {
                    // do something with result
                });
            }).catch(err => {
                // do something with error here
                console.log(err);
            });
        }
        return true;
    }
});

推荐阅读