JavaScript 动态顺序加载多个脚本

在本文中，我们将看到如何通过为每个脚本创建<script>元素并将它们插入DOM来以预期的执行顺序动态插入多个JavaScript文件。为此，将利用Promise和async()函数的概念来完成此任务，

Promise对象： Promise
可以通过值来实现，也可以通过错误（原因）来拒绝。它表示异步操作及其值的完成（或失败）。当发生其中任一选项时，就会调用then或catch方法。

异步函数： :
它启用基于Promise的异步行为。同时，使用异步函数还可以使用try/catch块。简单来说，异步调用下一条语句会在等待前一条语句执行完成之前就被执行。

语法：

let scriptList = [
              /*'scriptName1',
                'scriptName2',      //Define script names to load
                 ...........*/
            ];
scriptList.forEach(function(a){  //loop to iterate over each script file.
let script = document.createElement('script'); //creating <script> element
script.src = a;
script.async = false;
document.body.appendChild(script);
});

方法：需要动态加载的JavaScript文件将存储在名为multipleScript的数组中。然后，我们将遍历每个JS文件，并为每个文件创建<script>元素。如果我们不将async的值设置为false，执行的顺序将不会保存。否则，浏览器将自动将此属性设置为true。为了检测所有脚本是否已经加载完成，我们将使用加载完成时触发的onload事件。我们将使用promise的概念来确定是否所有脚本都已加载完成。

示例：在这个示例中，我们需要按照用户指定的顺序动态加载3个Javascript文件。根据用户的要求，三个javascript文件中
的任何一个都可以在没有连接到HTML文件的情况下使用。如果所有的脚本都成功加载，将在控制台中记录成功的消息，否则将记录错误消息。

HTML

<html>
  
<head>
    <title>
        Loading Multiple Scripts Dynamically in Javascript
    </title>
</head>
  
<body>
    <h1 id="head">Welcome to GeeksforGeeks</h1>
    <script>
        let create = (info) => {
            return new Promise(function(resolve, reject) {
                let gfgData = document.createElement('script');
                gfgData.src = info;
                gfgData.async = false;
                gfgData.onload = () => {
                    resolve(info);
                };
                gfgData.onerror = () => {
                    reject(info);
                };
                document.body.appendChild(gfgData);
            });
        };
        let gfgScript = ['firstscript.js', 
                         'secondscript.js', 
                         'thirdscript.js'];
        let promiseData = [];
        gfgScript.forEach(function(info) {
            promiseData.push(create(info));
        });
        Promise.all(promiseData).then(function() {
            console.log('The required scripts are loaded successfully!');
        }).catch(function(gfgData) {
            console.log(gfgData + ' failed to load!');
        });
    </script>
</body>
</html>

firstscript.js:

let head = document.getElementById("head");
head.style.color = 'green';

输出：

JavaScript 动态顺序加载多个脚本

secondscript.js:

let head = document.getElementById('head');
head.innerText = "Thank You!";

输出：

JavaScript 动态顺序加载多个脚本

thirdscript.js:

let head = document.getElementById("head");
head.style.fontStyle="italic";

输出：

JavaScript 动态顺序加载多个脚本

解释： 当脚本加载成功时，Promise解决；当加载失败时，Promise被拒绝。所有的脚本Promise都存储在一个数组中，并作为参数传递给
Promise.all() 。当所有输入的Promise都被解决时，它返回一个Promise。如果任何输
入的Promise被拒绝，整个Promise也会被拒绝。

如果连续加载了所有3个JS文件，则将在控制台中记录以下消息。

JavaScript 动态顺序加载多个脚本