How to use top-level await in JavaScript

Nov 5, 2019 updated Jun 26, 2021

Learn how to use this new feature currently available in v8

~~~

Usually can use await only inside async functions. So it’s common to declare an immediately invoked async function expression to wrap it:

(async () => {
  await fetch(/* ... */)
})()

or also declare a function and then call it:

const doSomething = async () => {
  await fetch(/* ... */)
}

doSomething()

Top-level await will allow us to simply run

await fetch(/* ... */)

without all this boilerplate code.

With a caveat: this only works in ES modules.

For a single JavaScript file, without a bundler, you can save it with the .mjs extension and you can use top-level await.

~~~