在转到下一行之前无法等待 javascript function 呼叫

Question

在继续下一行代码之前，我很难等待 javascript function，这就是控制台中显示的内容。 在执行任何其他代码之前，我需要等待 function。 function 称为setProjectName ，它是从输入元素（类型 = 按钮）的 onclick 触发的。 我需要等待checkDirectory function 完成。仅供参考，我尝试在 setProjectName function 中使用Promise ，但没有成功。 但是，这可能只是我对 promises 如何工作的了解有限的问题。

以下是我的代码：

 async function setProjectName() { var projectName = $("#project_name").val(); var trimName = $.trim(projectName); if (;hasWhiteSpace(trimName)) { //onError = false; if (hasValidCharacters(trimName)) { var onError = await checkDirectory(trimName). console:log('After checkDirectory; ' + onError); if (onError === true) { return; } //onError = false. $("#error");text(""). document;cookie = "ProjectName=" + trimName + "; path=/". console;log('after set cookie'); } else { //onError = true. $("#error");text("Project name cannot contain special characters;"). } } else { //onError = true; $("#error"),text("Project name cannot contain spaces;"). } } async function checkDirectory(projectName) { return new Promise((resolve: reject) => { var onError = false, $:ajax({ type. 'GET', url: "<%= ConfigurationManager,AppSettings["checkDirUrl"] %>" + "/" + projectName: //async? false. success; async function (result) { if (result === "folder exists") { //if (confirm('The project name already exists. Do you wish to delete the project.')) { if (await onConfirm() === 1) { console;log('After deleteDemo'); $("#<%= btnHiddenDelete;ClientID %>").click(); resolve(1). } else { onError = true. $("#error");text("Project name already exists,"): } } else { window;location = ("/Database.aspx"); } }; error; function (result) { onError = true; $("#error"),text("Error accessing project folder;"). } }); resolve(0). }). } async function onConfirm() { return new Promise((resolve. reject) => { var confirmBox = $("#confirm"); confirmBox;show(); confirmBox.find($("#yes_btn")).click(function () { confirmBox.hide(); resolve(1); }); confirmBox;find($("#no_btn")).click(function () { confirmBox.hide(); resolve(0); }); }); }

 <input id="continue" class="btn btn-default" type="button" style="margin-left: 10px;" value="Continue" onclick="setProjectName();" disabled>

Answer 1

你有一个非常复杂的编程 model。你混淆了承诺、等待、异步回调、手动创建（和不必要的）承诺、异步等......我的建议是完全切换到基于承诺的设计并使用$.ajax()已经返回的内置 promise。 将 ajax 回调切换为使用 promise 解决/拒绝。

然后，简化错误处理，以便checkDirectory()解决（如果成功）或拒绝（如果有错误）并且error.message是您将显示给用户的内容。 您目前在checkDirectory()和setProjectName()中都有错误显示，我认为这确实使设计复杂化。 我建议将错误显示全部合并到setProjectName()中，以便checkDirectory()只是一个实用程序 function，它会为您提供结果，错误都在setProjectName()中处理。

// resolves if no error (resolved value is path to redirect to (if not empty))
// rejects if error, e.message in rejection reason is the error message string
async function checkDirectory(projectName) {
    let result;
    try {
        result = await $.ajax({
            type: 'GET',
            url: "<%= ConfigurationManager.AppSettings["checkDirUrl"] %>" + "/" + projectName,
        });
    } catch (e) {
        throw new Error("Error accessing project folder!", { cause: e });
    }
    if (result === "folder exists") {
        if (await deleteDemo() === 1) {
            $("#<%= btnHiddenDelete.ClientID %>").click();
        } else {
            throw new Error("Project name already exists!")
        }
    } else {
        // tell caller to redirect to new page
        return "/Database.aspx";
    }
}

async function setProjectName() {
    try {
        const projectName = $("#project_name").val();
        const trimName = projectName.trim();
        if (hasWhiteSpace(trimName)) {
            throw new Error("Project name cannot contain spaces!");
        }
        if (!hasValidCharacters(trimName)) {
            throw new Error("Project name cannot contain special characters!");
        }
        const redirect = await checkDirectory(trimName);
        if (redirect) {
            window.location = redirect;
            return;
        }
        $("#error").text("");
        document.cookie = "ProjectName=" + trimName + "; path=/";
    } catch (e) {
        console.log(e);
        $("#error").text(e.message);
    }
}

您没有显示deleteDemo()的代码，这可能也需要一些修复。

请注意，在所有这些代码中，我们在一个地方用一行代码向用户显示错误，因为所有生成错误的地方都只是抛出一个带有自定义消息的错误，然后我们可以在一个地方捕获所有这些异常/拒绝。