`Top-Level await în Module ES` în JavaScript

Cod asincron ECMAScript 2022 (ES13)

Utilizarea cuvântului cheie await la nivelul rădăcină al modulelor fără a le încapsula în funcții async: încărcarea resurselor, importuri dinamice și inițializarea conexiunilor.

Sintaxă

const date = await fetch('/api/config').then(r => r.json()); export { date };

Înainte de introducerea facilității Top-Level await, cuvântul cheie await putea fi utilizat exclusiv în interiorul funcțiilor marcate explicit ca async. Acest lucru forța dezvoltatorii să recurgă la funcții anonime auto-executabile (IIFE: (async () => { ... })()) pentru a inițializa resurse asincrone la pornirea aplicației.

În modulele JavaScript moderne (ES Modules, fișiere cu type="module" în browser sau fișiere .mjs / Node.js modern), poți folosi await direct la nivelul superior al fișierului. Modulul curent își va suspenda execuția până la rezolvarea promisiunii, iar modulele care îl importă vor aștepta automat finalizarea acesteia înainte de a rula.

Scenarii uzuale pentru Top-Level await

// 1. Încărcarea dinamică a configurației globale dintr-un endpoint API
const raspuns = await fetch('https://api.dexblog.ro/v1/config');
const configuratie = await raspuns.json();

// Exportăm direct datele gata încărcate și rezolvate!
export const setariSistem = configuratie;

// 2. Import dinamic condiționat în funcție de mediul de rulare
let driverBazaDate;
if (process.env.NODE_ENV === 'production') {
    driverBazaDate = await import('./driver-postgres.js');
} else {
    driverBazaDate = await import('./driver-sqlite-local.js');
}
export const db = driverBazaDate.conectare();

// 3. Fallback de resurse CDN cu comutare automată
let modulGrafic;
try {
    modulGrafic = await import('https://cdn.exemplu.ro/chart.js');
} catch {
    modulGrafic = await import('./vendor/chart-local-fallback.js');
}
export const Chart = modulGrafic.default;

Cum funcționează arborele de importuri

Când un fișier folosește Top-Level await, motorul JavaScript nu blochează alte scripturi independente din pagină. În schimb, el blochează exclusiv execuția modulelor care depind direct (prin import) de acel modul, garantând că nicio componentă nu va încerca să citească date neinițializate.