javascript - 使用 promise 等待调用的函数并在继续之前完成它假设的操作

Question

我正在调用一个函数来加载一些文件，这个函数也在其他地方被调用..

要使这段代码成功运行，searchconfig.js必须先加载

我想要实现的是，此调用完成加载 searchconfig.js 然后继续其他代码，如果发生错误，记录它:

loadRemoteFile("Search/" + Search.Configuration.PathToConfigurable + "/Configurable/searchconfig.js");

完整代码:

$(document).ready(function () { 
    if (Search.Configuration && Search.Configuration.PathToConfigurable) {
        // the file that is necessary for the code to run successfully
        loadRemoteFile("Search/" + Search.Configuration.PathToConfigurable + "/Configurable/searchconfig.js");
    }

    setTimeout(function () {

        // anchor for injecting the  results
        $('body').prepend("<div id='search-results' class='container'></div>")

        for (var configItem in tempConfig) {
            Search.Configuration[configItem] = tempConfig[configItem];
        }

        var configsToCheckForSlash = ["FullPathToConfigurableFolder", "pathToSearch", "PathToConfigurable", "SearchServiceURL", "ThumbnailsURL", "CMSThumbnailsURL", "PreviewBaseURL"];

        for (var x = 0; x < configsToCheckForSlash.length; x++) {
            Search.Configuration[configsToCheckForSlash[x]] = addForwardSlashToSearchConfigSettings(Search.Configuration[configsToCheckForSlash[x]]);
            _log(Search.Configuration[configsToCheckForSlash[x]])
        }

        for (var x = 0; x < Search.Configuration.pagesToAvoid.length; x++) {
            var pagesToAvoid = Search.Configuration.pagesToAvoid[x].toLowerCase();
            if (location.href.toLowerCase().indexOf(pagesToAvoid) > -1) {
                _log("Search loader abandoned. Please check settings if this is not intended.");
                return;
            }
        }

        $("head").append(Search.Configuration.requiredFiles);

        //pick implementation points  
        Search.Configuration.anchorToUseForMainSearch = $("#search-results");

        if (!Search.Configuration.anchorToUseForMainSearch.length) {
            _log("The search implementation could not find a suitable place to place the search, aborting.");
            return;
        }

        searchIsExpanded = false;
        writeSearchHTML();
    }, 400);
});

loadRemoteFile 函数

function loadRemoteFile(filename, loadIntoHeader){ 
        filetype = filename.match(".css") ? "css" : "js";

        if (filetype=="js"){ 
            if(!loadIntoHeader){
                var script   = document.createElement("script");
                script.type  = "text/javascript";
                script.src   = filename;
                document.body.appendChild(script);          
            }else{
                ...             
            }           
        }else if (filetype=="css"){ 
            ...
        }
}

Answer 1

也许您希望 loadRemoteFile 返回一个 Promise？

function loadRemoteFile(filename, loadIntoHeader){ 
    return new Promise(function(resolve, reject) {
        filetype = filename.match(".css") ? "css" : "js";

        if (filetype=="js"){ 
            if(!loadIntoHeader){
                var script   = document.createElement("script");
                script.type  = "text/javascript";
                script.src   = filename;
                script.onload = resolve;
                script.onerror = reject;
                document.body.appendChild(script);
            }else{
                // mystery code
            }           
        } else {
            // more mystery code
        }
    }
}

使用:

loadRemoteFile("Search/" + Search.Configuration.PathToConfigurable + "/Configurable/searchconfig.js").then(function() {
    // what to do on success
}).catch(function() {
    // what to do on failure
});

替代使用(这也使用上面的“promisified”loadRemoteFile

$(document).ready(function () {
    (async function() {
        // place **ALL** your code inside the IIFE inside .ready callback
        if (Search.Configuration && Search.Configuration.PathToConfigurable) {
            // the file that is necessary for the code to run successfully
            try {
                await loadRemoteFile("Search/" + Search.Configuration.PathToConfigurable + "/Configurable/searchconfig.js");
            } catch(error) {
                // do your error handling here
            }
        }
        // execution here starts after the above loadRemoteFile finishes
        // or the condition is false
    })();
});