javascript - Promise 链接错误不会正确传递给 catch

Question

这是我的代码：

// promise chain being run onClick
function clickSequence(paramObj) {
    checkForDuplicateNums(paramObj)
        .then(() => {
            checkForDuplicateEmails(paramObj);
        })
        .then(() => {
            insertReservationForm(paramObj);
        })
        .then(() => {
            sendEmail(paramObj);
        })
        .then(() => {
            updateResBtnCounter(paramObj);
        })
        .then((pageUrl) => {
            goToPage(pageUrl);
        });
        .catch((err) => {
            displayErrorMsg(err);
        })
}

// display sweet alert 2 modal
function displayErrorMsg(err) {
    Swal.fire({
        title: 'error',
        icon: 'error',
        text: `${err}`
    });
}

// checking for duplicate numbers in DB
function checkForDuplicateNums(paramObj) {
    console.log('checkforduplicatenums');
    const { campaignId, numberInputValue, errorMsg } = paramObj;
    functionName = "checkForDuplicatesNums";

    return new Promise((resolve, reject) => {
        $.ajax({
            type: "POST",
            url: "./includes/ajax_general_utilities.php",
            data: {
                functionName,
                campaignId,
                numberInputValue,
            },
            cache: false,
            success: function(resp) {
                if (resp === 'true') {
                    reject(new Error(`${errorMsg}`));
                } else {
                    resolve();
                }
            },
            error: function(err) {
                console.error(err);
            }
        }); // close ajax
    }); // close promise
}

// checking for duplicate emails in DB
function checkForDuplicateEmails(paramObj) {
    const { emailInputValue, campaignId, errorMsg } = paramObj;
    functionName = "checkForDuplicateEmails";
    
    return new Promise((resolve, reject) => {
        $.ajax({
            type: "POST",
            url: "./includes/ajax_general_utilities.php",
            data: {
                functionName,
                campaignId,
                emailInputValue
            },
            cache: false,
            success: function (resp) {
                if (resp === 'true') {
                    reject(new Error(`${errorMsg}`));
                } else {
                    resolve();
                }

            },
            error: function (err) {
                console.error(err);
            }
        }); // close ajax
    }); // close promise
}

我正在尝试将一堆函数链接在一起，其中我将一个 ajax 调用包装在一个 Promise 中。 checkForDuplicateEmails并checkForDuplicateNums检查数据库中是否存在重复值，如果发现重复值，则调用reject(). 然后，我将一条错误消息传递给displayErrorMessage显示sweet alert 2模式的 catch 块中的函数名称。

我正在单独测试每一个以确保它们正常工作，但我遇到了问题。我硬编码了我知道的值已经在数据库中，以确保reject()被调用。当我注释掉除第一个函数之外的所有内容时checkForDuplicateNums，会抛出错误，并且它被正确传递给displayErrorMsg并弹出一个模式。如果我取消注释第一个.then()调用并更改它以便checkForDuplicateNums解决，而不是checkForDuplicateEmails将错误消息正确显示为模式，我只会在控制台中收到一个错误，如下所示：

Uncaught (in promise) Error: <then it displays error message only in console>
    at Object.success (<page url>:231)
    at c (jquery-3.5.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.5.1.min.js:2)
    at l (jquery-3.5.1.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery-3.5.1.min.js:2)

我不确定为什么模态框只会在调用第一个函数时弹出而不是在那之后弹出，我假设我没有完全正确地使用承诺，但我似乎无法通过搜索找到特定于我的情况的答案网上左右。

标签： javascriptjqueryajaxmodal-dialoges6-promise