在異步代碼段完成之前，如何停止執行我的代碼？

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 分配給一個簡單變量時，請求立即開始工作，代碼繼續運行，無需等待完成