JavaScript - 标准脚本中的顶级等待

Question

正如答案中所指出的here

await

可以在模块的顶层使用，现在这是一个功能所有主要浏览器都支持。

但是，对于常规脚本（不是模块），异步操作之后的所有代码都需要包装在函数中。这是一个使用 Promise 来演示这一点的简单示例：

function renderLayout(){

    // Simplified for demonstration

    return new Promise((resolve) => {

        setTimeout(() => {

            resolve();

        }, 1000);

    });

}

renderLayout().then(() => {

    // All code after the promise gets executed in this function

    console.log('Done!');

});

我使用这种方法面临的问题是，可能不希望在函数内执行异步操作之后的代码，例如，因为它为该代码块引入了新的作用域或允许使用

 return

声明。

我目前正在编写一个脚本，该脚本对布局执行一些异步更改，并且希望脚本的其余部分仅在完成这些更改之后继续，就好像它们是直接在全局范围内执行而不是从功能。 我还应该提到，这是模板/预处理系统的一部分，其中异步操作之后的部分是动态生成的，这就是为什么我更喜欢它的“标准”行为。

鉴于这在模块中是可能的，我希望也有一种方法可以在常规脚本中实现它。如果有人知道实现此目标的方法，我们将不胜感激。

Answer 1

IIFE

包装整个脚本，这样你就可以“有点”模拟模块中的顶级await。您还可以考虑将

defer

添加到

script

，因为模块已延迟。