通过Promises异步加载外部js文件的最佳方式

Best way to asynchronously load external js files via Promises

本文关键字：文件 最佳 方式 js 外部 Promises 异步 加载 通过      更新时间：2023-09-26

我正在建立一个使用一些外部js文件的网站。我通过下面的代码加载文件，但是如果一个或多个文件下载失败，我不确定如何继续。我是否应该一直请求它们直到它们全部下载?是否为每个文件做一个单独的onload事件更好?我如何知道哪个文件加载失败，需要再次请求?

var filesToLoad = ["https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"];
var loader = new ScriptLoader();
filesToLoad.forEach(function(file) {
    loader.add(file);
});
loader.loaded(function(failedCallbackF) {
    console.log("Error.");
    //Try getting the files again??
});
function ScriptLoader() {
    var promises = [];
    this.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);
                console.log('was rej');
            }, false);
            document.body.appendChild(script);
        });
        promises.push(promise);
    };
    this.loaded = function(callbackOnFailed) {
        Promise.all(promises).then(function(result1) {
            console.log('Script loaded from:', result1);
        }, callbackOnFailed);
    };
}

嗯，有一个官方的API叫做"动态导入"，我建议你使用它或使用它(像SystemJS或像webpack这样支持它的工具)。

import("yourScriptFile.js").then(function(){
   // script loaded.
});

如果你想加载多个文件，你也可以使用它:

Promise.all(["url1", "url2"].map(System.import)).then(function(){
    // loaded all here
});

也许这对你有帮助。

var filesToLoad = ["https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"];   
filesToLoad.forEach(function(file) {
    var loader = new ScriptLoader();
    loader.add(file)
    loader.loaded(function(failedCallbackF) {
        console.log("Error.");
        //reload this file
    });
});
function ScriptLoader() {
    var promises = [];
    this.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);
                console.log('was rej');
            }, false);
            document.body.appendChild(script);
        });
        promises.push(promise);
    };
    this.loaded = function(callbackOnFailed) {
        Promise.all(promises).then(function(result1) {
            console.log('Script loaded from:', result1);
        }, callbackOnFailed);
    };
}
相关文章：