全局调用异步函数时出错：“等待仅在异步函数和模块的顶层主体中有效”？

Question

在我开始之前，我承认有几个关于 SO 的问题听起来可能与我的标题相似相似，但是，我阅读的所有问题都更多 比我的代码复杂，而且解释似乎与我的情况无关。

谁能帮我理解我的代码（下面的sn-p）中发生了什么导致这个错误：

未捕获的语法错误：await 仅在异步函数中有效，并且 模块的顶层主体。

据我所见，导致错误的await 是在“顶级”正文中。还是顶级机构的其他含义？非常感谢！

EDIT 区别于其他建议的（类似）问题here：我的问题不涉及 httpGet，其他一些上下文不同，最重要的是我收到了答案这为我解决了这个问题，与另一个问题的（单独）答案中给出的建议不同。因此，虽然我能够在这里找到解决方案，但我相信保留我的问题对于普通观众来说是有价值的。

var data;
await getData();
document.body.write(data);

async function getData() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
        method: 'GET',
        headers: {
          'Accept': 'application/json, text/plain, */*',
          'Content-type': 'application/json'
        }
    });
    data = await res.json();
}

Answer 1

顶级await 表示您正在尝试在async 函数之外使用async/await 语法。解决方法是创建一些功能，例如main 并把代码放进去。

async function main() {
  var data;
  await getData();
  document.body.write(data);
}

main();

有一天顶级 async/await 将得到支持，并且有一个提案。同时你可以使用这个 babel 插件来使用它 https://babeljs.io/docs/en/babel-plugin-syntax-top-level-await 没有像 main 这样的包装函数。

Answer 2

是的，它是全局代码 - 在我的 script.js 文件中。我想还有什么比这更“顶级”的呢？

正如评论中指出的，问题不是“顶级”而是“在模块中”。

只有当type 属性要求这样做时，Web 浏览器才会将脚本作为模块加载：

<script type="module" src="script.js"></script>

这启用了对import 的支持（CORS 允许），使脚本异步加载，并停止顶级作用域是全局的。