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被称为 iff 所有承诺解析，如果任何承诺被拒绝，则调用onError，第一个参数是第一次发生的拒绝。

Answer 2

Promise.all会让你检查多个承诺。

我会修改add以便它返回一个promise。然后，不要传递一个'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");
  })

如何知道所有承诺何时被基本的js承诺拒绝或解决

2 个答案: