如何知道何時使用基本的 js 承諾拒絕或解決所有承諾

Question

我正在嘗試使用基本的 JS 承諾異步加載我的 Web 應用程序中的所有資源。

這是我用來加載所有 .js 文件的 ScriptLoader：

function ScriptLoader() {
this.promises = [];

this.add = function(url, doneFunc) {
    var promise = new Promise(function(resolve, reject) {

        var script = document.createElement('script');
        script.src = url;

        script.addEventListener('load', function() {
            resolve(script);
            if(doneFunc)
                doneFunc(true);
        }, false);

        script.addEventListener('error', function() {
            reject(script);
            if(doneFunc)
                doneFunc();
            console.log(url + ' was rej');
        }, false);
        document.head.appendChild(script);
    });

    this.promises.push(promise);
};

}

我調用這個函數來加載 JS 文件：

function IncludeJS(jsFile, scriptDoneLoading) {
    app.scriptLoader.add('js/'+ jsFile, scriptDoneLoading);
}

我需要知道所有 js 文件何時已被解析或拒絕，但目前尚不清楚我如何知道這一點。

是否有一些回調在處理完所有承諾后被發送？

Answer 1

假設您正在使用新的 ES6 Promise 類，您可以使用Promise.all()

Promise.all(app.scriptLoader.promises).then(onSuccess, onError);

如果所有承諾都解決了，則onSuccess被調用，如果任何承諾被拒絕，則調用onError ，第一個參數是發生的第一個拒絕。

Answer 2

Promise.all 會讓你檢查多個承諾。

我會修改 add 以便它返回一個承諾。 然后，當它完成時，不要傳遞一個'doneFunc'來執行，只需將一些東西掛在.then()上。

 add = function(url) { var promise = new Promise(function(resolve, reject) { var script = document.createElement('script'); script.src = url; script.addEventListener('load', function() { resolve(script); }, false); script.addEventListener('error', function() { reject(script); }, false); document.head.appendChild(script); }); return promise }; // here is how to call add('myscript.js').then(function(scriptNode){ console.log("completed"); }) .catch(function(er){ console.log("failed", er); }); //and here is how to load multiple var array_of_promises = ['myscript.js', 'otherscript.js'].map(add) Promise.all(array_of_promises).then(function(){ console.log("they are all loaded"); })