等待加载Javascript文件的Javascript文件

我有一个文件，比如加载

scripts1.js

的

index.js

，加载

red.js

，

blue.js

我想等待在

index.js

中完成

red.js

和

blue.js

的加载。目前，这不是我在这些文件定义中获得的行为。我不知道这是否是Javascript的预期行为，如果是，我如何修复它

在我的

index.js

文件中，我有如下内容：

console.log('index.js');

async function doLoad() {
    console.log('setting rules');
    function load(script_url) {
      return new Promise(function (resolve, reject) {
        var script = document.createElement('script');
        script.onload = resolve;
        script.src = script_url;
        document.head.appendChild(script);
      });
    }

    
    await load('path-to-scripts1.js');
  }

// then
(async () => {
    await doLoad();

    console.log('Final load');
  })();

scripst1.js

console.log('scripts1.js');

async function loadScripts(script_urls) {
  function load(script_url) {
    return new Promise(function (resolve, reject) {
      var script = document.createElement('script');
      script.onload = resolve;
      script.src = script_url;
      document.head.appendChild(script);
    });
  }
  var promises = [];
  for (const script_url of script_urls) {
    promises.push(load(script_url));
  }
  await Promise.all(promises);
}

(async () => {
  await loadScripts(['path-to-red.js', 'path-to-blue.js']);

  console.log('done loading scripts1.js');
})();

console.log('red');
... does some stuff

console.log('blue');
...does some stuff

最后是

red.js

和

blue.js

red.js

console.log('scripts1.js');

async function loadScripts(script_urls) {
  function load(script_url) {
    return new Promise(function (resolve, reject) {
      var script = document.createElement('script');
      script.onload = resolve;
      script.src = script_url;
      document.head.appendChild(script);
    });
  }
  var promises = [];
  for (const script_url of script_urls) {
    promises.push(load(script_url));
  }
  await Promise.all(promises);
}

(async () => {
  await loadScripts(['path-to-red.js', 'path-to-blue.js']);

  console.log('done loading scripts1.js');
})();

console.log('red');
... does some stuff

console.log('blue');
...does some stuff

blue.js

console.log('scripts1.js');

async function loadScripts(script_urls) {
  function load(script_url) {
    return new Promise(function (resolve, reject) {
      var script = document.createElement('script');
      script.onload = resolve;
      script.src = script_url;
      document.head.appendChild(script);
    });
  }
  var promises = [];
  for (const script_url of script_urls) {
    promises.push(load(script_url));
  }
  await Promise.all(promises);
}

(async () => {
  await loadScripts(['path-to-red.js', 'path-to-blue.js']);

  console.log('done loading scripts1.js');
})();

console.log('red');
... does some stuff

console.log('blue');
...does some stuff

控制台输出：

index.js
scripst1.js
Final load
red.js
blue.js
done loading scripts1.js

我想要的输出：

控制台预期输出：

index.js
scripst1.js
red.js
blue.js
done loading scripts1.js
Final load

提前感谢您的回答