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

Question

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

有人可以帮助我了解导致此错误的代码（下面的代码段）中发生了什么：

Uncaught SyntaxError: await 仅在异步函数和模块的顶层主体中有效。

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

编辑在这里与其他建议的（类似）问题区分开来：我的问题不涉及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 function 之外使用async/await语法。 解决方法是创建一些 function 例如main并将代码放入其中。

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

main();

有一天将支持顶级异步/等待，并且有一个提案。 同时你可以使用这个 babel 插件来使用它https://babeljs.io/docs/en/babel-plugin-syntax-top-level-await没有包装器 function 像main 。

Answer 2

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

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

Web 浏览器仅在type属性要求时才会将脚本作为模块加载：

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

这支持import （CORS 允许），使脚本异步加载，并停止顶级 scope 是全局的。