我正在尝试切换到使用基本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文件已被解决或拒绝,但目前还不清楚我怎么能知道这一点。
是否有一些回调被发送当所有的承诺已经被处理?
假设您正在使用新的ES6 Promise类,您可以使用Promise.all()
Promise.all(app.scriptLoader.promises).then(onSuccess, onError);
onSuccess
在所有承诺都解决时调用, onError
在任何承诺被拒绝时调用,第一个参数是发生的第一个拒绝。
承诺。都可以让你检查多个承诺。
我将修改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");
})