在异步代码段完成之前，如何停止执行我的代码？

Question

今天我一直在努力让一些 JavaScript 代码工作。

此代码的目标是在调用 recordFormSubmission function 之前，将recordFormSubmission function 调用返回的所有文件名填充到fileNameObj中。

async function uploadSubmissionFiles(files)
{
    //Get an array for the names of each key of the files object
    var filesKeys = Object.keys(files);
    var fileSubmissionErrors = [];
    var formElementPK = "";

    //Create an object that keeps track of the file names that are saved to the server
    var fileNamesObj = {};

    //For each question where we uploaded files, call an ajax function 
    //where we transfer the files from the client to the server
    var promiseToUploadFiles = () => {
        return new Promise((resolve,reject) => 
        {
            for(let i = 0; i < filesKeys.length; i++)
            {
                formElementPK = filesKeys[i].match("(?<=fpk).*");
                console.log(formElementPK);
                if(files[filesKeys[i]]["type"] == "canvas")
                {
                    var canvasElement = files[filesKeys[i]]["response"];
                    var canvasImageBase64 = canvasElement.toDataURL().split(';base64,')[1];
                    //Use ajax to upload the file to the server
                    $.ajax(
                        {
                            url: "./includes/ajaxColdfusion/fillout/submittedFileUpload.cfc?method=uploadSubmittedCanvasImage",
                            type: "POST", 
                            data: canvasImageBase64,
                            enctype: 'multipart/form-data',
                            contentType: false,
                            processData: false
                        }
                    )
                    .then( function(response)
                        {
                            var responseElements = response.getElementsByTagName("string");
                            var resultMessage = responseElements[0].innerHTML;
                            console.log("File upload result for " + canvasElement.id + ": " + resultMessage);

                            if(resultMessage == "success")
                            {
                                //On success, responseElements[1] contains the name of the file that was saved to the server. We record it!
                                fileNamesObj[formElementPK] = responseElements[1].innerHTML;
                            }
                            else
                            {
                                //On failure, responseElements[1] contains the error message for what happened during the upload
                                fileSubmissionErrors.push(responseElements[1].innerHTML);
                                fileNamesObj[formElementPK] = "error.png";
                            }
                            console.log(fileNamesObj);
                        }
                    );
                }
                else if(files[filesKeys[i]]["type"] == "fileUpload")
                {
                    var fileUploadForm = files[filesKeys[i]]["response"];
                    var formData = new FormData(fileUploadForm);
                    var fileFieldName = document.getElementById("question" + formElementPK + "FileUpload").getAttribute("name");
                    formData.append("fileFieldName", fileFieldName);
                    //Use ajax to upload the file to the server
                    $.ajax(
                        {
                            url: "./includes/ajaxColdfusion/fillout/submittedFileUpload.cfc?method=uploadSubmittedFile",
                            type: "POST", 
                            data: formData,
                            enctype: 'multipart/form-data',
                            contentType: false,
                            processData: false
                        }
                    )
                    .then( function(response)
                        {
                            var responseElements = response.getElementsByTagName("string");
                            var resultMessage = responseElements[0].innerHTML;
                            console.log("File upload result for " + fileUploadForm.id + ": " + resultMessage);

                            if(resultMessage == "success")
                            {
                                //On success, responseElements[1] contains the name of the file that was saved to the server. We record it!
                                fileNamesObj[formElementPK] = responseElements[1].innerHTML;
                            }
                            else
                            {
                                //On failure, responseElements[1] contains the error message for what happened during the upload
                                fileSubmissionErrors.push(responseElements[1].innerHTML);
                                fileNamesObj[formElementPK] = "error.png";   
                            }
                            console.log(fileNamesObj);
                        }
                    );
                }
            }
            
            var retObj = {
            "fileSubmissionErrors" : fileSubmissionErrors,
            "fileNames" : fileNamesObj
            }
            console.log("Resolved the promise!");
            resolve(retObj);
        });
    }
    
    return await promiseToUploadFiles();
}


async function recordFormSubmission(data, formPK, fileNames)
{
    var JSONData = JSON.stringify(data);
    var JSONFileNames = JSON.stringify(fileNames);
    var submissionErrors = [];

    console.log("Filenames at trigger of record form submission: ", fileNames);
    console.log("Now waiting 2 seconds with     await new Promise(r => setTimeout(r, 2000));");
    await new Promise(r => setTimeout(r, 2000));
    console.log("Fileanmes after 2 seconds of triggering record form submission", fileNames);

    $.ajax(
        {
            url: "./includes/ajaxColdfusion/fillout/recordFormSubmission.cfc?method=recordFormSubmission",
            type: "POST", 
            data: "JSONData=" + JSONData + "&formPK=" + formPK + "&JSONFileNames=" + JSONFileNames,
            enctype: 'multipart/form-data',
            cache : false
        }
    ).
    done(function(response)
        {
            //If successful...
            console.log("Record form submission successful:" + response.getElementsByTagName("string")[0].innerHTML);
        }
    ).
    fail(function(response)
        { 
            //If not successful...
            console.log("Record form submission failed");
            submissionErrors = [response.getElementsByTagName("string")[1]];
        }
    );

    return submissionErrors;
}


uploadSubmissionFiles(filesToUpload.then( function(fromUploadSubmissionFiles)
{
     var fileSubmissionErrors = 
     fromUploadSubmissionFiles["fileSubmissionErrors"]
     var fileNames = fromUploadSubmissionFiles["fileNames"];
     //Query the database to save our form data to the database
     var formDataSubmissionErrors = recordFormSubmission(dataToRecord, formPK, fileNames);
}

以上是这段代码的所有重要部分。 但就目前而言，在 fileNamesObj 变量填充有从 ajax function 返回的文件名之前调用并执行 recordFormSubmission()。这一定意味着代码在继续执行之前不会等待 ajax 完成执行，即使已经实现了 promise。

我想我的问题是，如果我希望 JavaScript 代码在调用recordFormSubmission()之前等待所有 ajax 函数完成，我做错了什么？

我可能会在这里想到一个轮询解决方案，但我想认为有一种方法可以通过承诺或更好的实践来解决这个问题。

这是运行修改后的代码以返回等待的 promise 的结果。它还显示了 ajax 函数如何返回以及在等待两秒和文件名必须存在的临界点出现之间的 window 时间内获取文件名。

Answer 1

这个问题的解决方案是在另一个问题的答案中找到的： https://stackoverflow.com/a/66747114/16511184

感谢@Heretic-Monkey 提供它。

解决方案：在每个ajax() function 调用前放置一个await 。 不要在 promise 中封装任何内容。

我是 Javascript 中 Promises 概念的新手，所以我在不知不觉中犯了一个错误，将 promises 封装在彼此内部。 非常重要的是要注意 jquery ajax() function 返回 promise。在我的问题中，我触发了我没有使用await的异步代码。 相反，我对包含ajax() function 的 function 使用await 。 await根本不会等待很长时间，因为所有代码所做的只是触发ajax() function 并离开，而不是等待它完成（非常我想要发生的事情的症结）。

这是一个很好的类比：

你要和你的朋友去超市。 您告诉您的朋友与您分开并拿一盒鸡蛋。 你等着他们，一旦他们拿完鸡蛋回来，你们就会一起 go 到收银台。

实际上，我遇到的问题是我决定等到我告诉我的朋友把鸡蛋送到 go 到收银台。 我需要等待我的朋友专门拿到鸡蛋。

Answer 2

尝试这个。

async function uploadSubmissionFiles(files)
{
     ...
     var promiseToUploadFiles = () => {
         return new Promise((resolve,reject) => 
             {
                  $.ajax(
                        {
                            url: "./includes/ajaxColdfusion/fillout/submittedFileUpload.cfc?method=uploadSubmittedFile",
                            type: "POST", 
                            data: formData,
                            enctype: 'multipart/form-data',
                            contentType: false,
                            processData: false
                        }
                    )
                    .then( function(response)
                        {
                            var responseElements = response.getElementsByTagName("string");
                            var resultMessage = responseElements[0].innerHTML;
                            console.log("File upload result for " + fileUploadForm.id + ": " + resultMessage);

                            if(resultMessage == "success")
                            {
                                //On success, responseElements[1] contains the name of the file that was saved to the server. We record it!
                                fileNamesObj[formElementPK] = responseElements[1].innerHTML;
                            }
                            else
                            {
                                //On failure, responseElements[1] contains the error message for what happened during the upload
                                fileSubmissionErrors.push(responseElements[1].innerHTML);
                                fileNamesObj[formElementPK] = "error.png";   
                            }
                        }
                    );
             }
        }
    await promiseToUploadFiles();
     ...
}

有必要将您的 promise 包装在 function 中，并在调用后等待其完成。 当您将 promise 分配给一个简单变量时，请求立即开始工作，代码继续运行，无需等待完成