javascript - 全局调用异步函数时出错 : "await is only valid in async functions and the top level bodies of modules"?

Question

在开始之前，我承认有几个关于 SO 的问题可能听起来与我的标题相似，但是，我阅读的所有问题都比我的代码复杂，并且解释似乎与我的情况无关。
有人可以帮助我了解导致此错误的代码(下面的代码段)中发生了什么:

Uncaught SyntaxError: await is only valid in async functions and thetop level bodies of modules.

据我所知， await导致错误的原因是在“顶级”机构中。还是顶级机构的其他含义？非常感谢!
编辑 区别于其他建议的(类似)问题 here :我的问题不涉及httpGet，其他一些上下文是不同的，最重要的是我收到了一个为我解决问题的答案，这与其他问题的(单独)答案中给出的建议不同。因此，虽然我能够在这里找到解决方案，但我相信对于普通观众来说，留下我的问题将是有值(value)的。

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/await async 之外的语法功能。解决方法是创建一些功能，例如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没有像 main 这样的包装函数.