How to use top-level await in JavaScript

Nov 5, 2019updated Jun 26, 2021

Learn how top-level await lets you use await outside an async function, dropping the IIFE boilerplate, and why it only works inside ES modules and .mjs files.

~~~

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.

Tagged: JavaScript · All topics

~~~