使用異步功能時如何防止關閉引導箱？

我想得到的是，如果用戶收到任何驗證錯誤，則引導框將顯示“這是必需的”。到目前為止，我已經實作了這一點。但主要問題是 - 如果用戶單擊“是”按鈕，它將關閉引導框視窗。我得到這個是因為我不得不在 bootbox 中使用 g async 回呼。因此，即使在回傳false 之后，引導箱也會關閉。但我希望用戶在按下取消按鈕之前顯示該框。如果他們單擊是，那么它應該顯示驗證，并打開框。這是我的代碼：

        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) {
                    var data = await self.createData(); /* for this 
await function I had to use async callback. without this bootbox is opend*/
                    $.ajax({
                        type: "POST",
                        success: function (result) {

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

我該如何解決這個問題？提前致謝

uj5u.com熱心網友回復：

在我看來，bootbox.confirm()對async您嘗試使用的回呼沒有任何支持。await除非您顯式回傳false，否則當您的回呼回傳時，引導框將關閉，這將是您點擊第一個的點，但async回呼函式總是回傳一個未明確回傳的承諾false。你不能改變這一點。

您可以做的是使您的回呼成為常規回呼函式，而不是在驗證失敗時async回傳false，然后創建一個嵌入式async函式，您可以在其中使用await您從第一個回呼中呼叫的函式，如下所示。請注意，bootbox 將在異步代碼完成之前關閉，因此如果 bootbox 代碼中有任何錯誤，您將需要以新的方式來呈現這些錯誤，也許會放置一個新的 bootbox。這是在仍然使用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()和.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;
    }
});

標籤：javascript 查询 承诺 打回来 引导箱

上一篇：為什么我的.empty()沒有清空父元素？

下一篇：在下拉串列中選擇多個值