Top-level await
Top-level await allows a module to pause its own evaluation while awaiting asynchronous initialization work. It can simplify module startup code that depends on async resources.
Overview
Top-level await allows a module to pause its own evaluation while awaiting asynchronous initialization work. It can simplify module startup code that depends on async resources.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 89 | 89 | 89 | 15 | 89 | 15 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- Doesn't support multiple modules simultaneously importing a module containing a top-level await (see bug 242740).
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- Doesn't support multiple modules simultaneously importing a module containing a top-level await (see bug 242740).
Syntax
JAVASCRIPT
// module.js
const response = await fetch('/api/config');
export const config = await response.json();
// Client-side
import { config } from './module.js';
console.log(config); // Executed after loading is completeUse cases
Async startup data
Load configuration, locale assets, or capability checks before exporting a fully ready module value.
Module bootstrap steps
Keep initialization logic near the module that depends on it instead of wrapping everything in manual setup functions.
Cautions
- Top-level await can delay dependent modules, so use it only when startup ordering genuinely needs it.
- A module graph with too many implicit async boundaries becomes harder to reason about.
Accessibility
- Async initialization should still expose loading and failure states clearly in the UI.
- Do not let startup waits leave users with silent or frozen-looking screens.
Related links
Powered by web-features