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，二级Level1.js，二级Level2.js，firstLevel2.js。第二层3.js，最后是第二层4.js。但是，当我看铬的负载顺序时，这就是我所看到的。

​

​

这对我来说越来越成问题了，因为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');
};

它可能对您的实际需求没有那么大的帮助，但它确实按您预期的顺序加载了模块