等待JavaScript中的动态导入

Question

在尝试移植一些JS代码以使用模块时，我遇到了一个无法解释的特殊情况。我正在设置我的主JS文件，以对我的主要入口点进行动态导入，而它们又对它们所需的所有文件进行了导入。设置如下所示：

index.js

(async function () {
    await import('./firstLevel1.js');
    await import('./firstLevel2.js');
 })()

firstLevel1.js

(async function () {
    await import('./secondLevel1.js');
    await import('./secondLevel2.js');
})()

firstLevel2.js

(async function () {
    await import('./secondLevel3.js');
    await import('./secondLevel4.js');
})()

由于我要导入的某些代码是旧代码，因此我将index.js的脚本标签设置为async =“ false”，以确保所有文件均以正确的顺序加载。在这个特定示例中，我希望加载顺序为index.js，firstLevel1.js，secondLevel1.js，secondLevel2.js，firstLevel2.js。 secondLevel3.js，最后是secondLevel4.js。但是，当我查看chrome中的加载顺序时，这就是我所看到的。

这对我来说成为问题，因为JS加载的顺序不是我想要正确设置旧文件的顺序。

为什么我看到的装载顺序与预期的不同？有什么办法可以让它们同步加载？

Answer 1

有点讨厌，但是它的一种工作方式如下：

在firstLevel?.js中，导出将在index.js中等待的异步函数

index.js

(async function () {
    await (await import('./firstLevel1.js')).default();
    await (await import('./firstLevel2.js')).default();
})();

firstLevel1.js

export default async function () {
    await import('./secondLevel1.js');
    await import('./secondLevel2.js');
};

firstLevel2.js

export default async function () {
    await import('./secondLevel3.js');
    await import('./secondLevel4.js');
};

它可能不会对您的实际需求有用，但是会按您期望的顺序加载模块