javascript - 按一定顺序加载多个脚本

Question

我需要按一定顺序加载几个js脚本。事实上我是用 typescript 做的，我不能使用 jQuery，只能使用纯 ts/js。我现在拥有的是:

var script1 = document.createElement('script');
script1.type = 'text/javascript';
script1.src = 'script1.js';
document.head.appendChild(script1);
script1.onload = function () {

    var script2 = document.createElement('script');
    script2.type = 'text/javascript';
    script2.src = 'script2.js';
    document.head.appendChild(script2);
    script2.onload = function () {

        etc...

    }

}

它有效，但我相信有一些更优雅的方法可以做到这一点？请用普通的 javascript 或 typescript 给出示例。

Answer 1

是的!有。使用Promises和async/await

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = url
    document.head.appendChild(script)
    script.onload = () => resolve()
  })
}

async function loadScripts() {
  await loadScript('script1.js')
  await loadScript('script2.js')
  // ..
}

loadScripts().then(_ => console.log('All scripts loaded in specified order'))