全局调用异步函数出错："wait仅在异步函数和模块的顶层主体中有效"？

Question

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

有人能帮我理解我的代码（下面的代码片段）中发生了什么导致了这个错误吗

未捕获SyntaxError:await仅在异步函数和顶级模块体中有效。

据我所见，导致错误的wait位于“顶层”主体中。或者是顶级身体的其他意思？谢谢！

编辑区别于其他建议（类似）的问题在这里：我的问题不涉及http获取，一些其他的上下文是不同的，最重要的是，我已经收到了一个答案，解决了我的问题，不像在（孤独的）答案中给出的建议其他问题。因此，虽然我在这里找到了解决办法，但我相信我的问题对广大观众来说是有价值的。

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

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

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

只有当type属性表明要将脚本作为模块加载时，Web浏览器才会将其作为模块加载：

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

这将支持导入（CORS允许），使脚本异步加载，并停止顶层范围全局。

Answer 2

顶级await表示您试图在async函数之外使用async/await语法。解决方法是创建一些函数，例如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。