Top-Level Await JavaScript

Sanado badan, waxa dhib saa’id u wayni ka taagnayd in aanad awood u lahayn isticmaalka (await) meel ka baxsan async function. hadaba caqabadan ayaa laga gudbay kadib markii lagu soo daray feature kan luuqada sanadii 2022 (ES2022). hadaba aan sii dhex galno wax yaabaha ay haboon tahay inad ogaato inta aadan isticmaalin ka hor iyo waliba qaabka saxda ah ee loo isticmaalo.

Hadaba waa maxay top-level await ?

Top-level await waxa ay kuu ogalanaysaa in aad isticmaasho await module scope kaaga dhexdiisa adiga oo aan u baahnayn in aad dhex gelisid async function.

// Before: await waxad u bahnayd in aad dhex galisid async function
// si aad u sugtid promise-ka lasoo celinayo
(async () => {
  const data = await fetchData();
  console.log(data);
})(); //  Immediately Invoked Function Expression (IIFE)

// After: Top-level await, uma baahnid wax async function ah
const data = await fetchData();
console.log(data);

Waa maxay limitionska ku horyaala, waa maxayse meelaha aad u isticmaali kartaa ?

Hadii an ku horayno xadidanshaha (limitions-ka) feature-kan top-level await waxa ka mida;

• in aanad awood u lahayn in aad isticmaasho await adigoo isticmaalaya CommonJs module system

• sidoo kale awood uma lihid in aad isticmasho wixii ka horeeyay node version 14

waxa aad awood u leedahay isticmalka top-level await;

• marka aad isticmaalayso ECMAScript modules

• iyo waliba node version 14 iyo wixii ka dambeyay

Hab isticmaalka

Marka la joogo qaybta front-end ga waxa aad u baahan tahay in aad isticmaasho type=module attribute taaso ka dhigan in aad, leedahay module type system-ka an isticmaalaya waa ECMAScript modules

<!-- index.html -->
<script type="module">
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const todosData = await response.json();
    console.log(todos)
  } catch (error) {
    console.error("Fetch failed:", error);
  }
</script>

// or

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

hadii aynu isla eegno qaybta server-kana(node) waxa kaliya ee aad u bahan tahay waa node version 14 iyo wixii ka dambeeyay, iyo in aad isticmaasho ECMAScript modules type system

// package.json file
{
  "type": "module"
}

// index.js file
const response = await fetch('https://jsonplaceholder.typicode.com/todos');
const todos = await response.json();

console.log(todos.slice(0, 5));

!IMPORTANT : shay ay mudan tahay inaad ogaato ayaa ah in Top-level await ay block-garayso module-ka

Marka aan isticmalno Top-level await module dhexdiisa, dhamaan code-ka ka dambeeya await waa la istaajinaya si loo sugo await inta ay ka noqonayso resolved (ama ay kasoo qaadayso data-da la doonayo).

taas oo macnaheedu tahay sida tan;

• Code-ka ka dambeeya await waa la istaajinaya ilaa promise-ku ka noqonayo Resolved

• Hadii module soo import-garaynayo module kaaso isticmaalaya top-level await, module-ka wax soo import garaynayaa waxa uu sugi doona module-ka uu so import garaynayo inta uu ka dhamaysanayo fetching-kiisa uuna noqonayo resolved promise.

Dabeecadan ayaa dhalin karta su’aasha ah, marka ay promises-ku yihiin asynchronous oo aysan sababin wax blocking ah, waa maxay sababta ay ugu dhaqmayso top-level await qaabkan ?

intaynaan ka jawaabin su’aashan aan isla fahano waxa uu yahay blocking-ku?

marka aan leenayahay top-level await blocks the module, kama wadno waxa blocking lagu samaynayaa dhamaan engine-ka amaba threadka sida loops-ku u sameeyan, balse waxa laga wadaa kadib isticmaalka await waxuu suspend ama hakad ku samaynaya dhaman code ka dambeeya await ee isla module-kas dhexdiisa ama module kale kaaso so import garaynaya module-ka isticmalaya await tan iyo ilaa ay ka noqonayso resolved.

hadaba markan isla fahanay macnaha saxda ah ee blocking aan ku laabano su’aasheni hore, kadib isticmalka await waxa ay ka dhigan tahay sidii in aad leedahay javascript, waxaad sugtaa ilaa inta task-gaas laga dhamaynayo, hana u gudbin laynka xiga mudadaas.

console.log("1️⃣ Module started");

const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
console.log("⏳ Waiting for fetch to resolve...");

const data = await response.json();

console.log("✅ Data received:", data.title);

console.log("2️⃣ After top-level await");

// Expected output
1️⃣ Module started
⏳ Waiting for fetch to resolve...
✅ Data received: delectus aut autem
2️⃣ After top-level await

hadaba waxa aad suuraysata hadii uusan jiri lahayn wax hakad ah kadib isticmaalka await?

const response = await fetch(...); // no pause
const data = await response.json();

console.log(data); // ⚠️ waxay noqonaysa undefined amaba code-ka oo dhan ayaa failed garobaya

Conclusion

Top-level await waxa ay meesha ka saaraysa isticmalki faraha badnaa ee asyn functions-ka (boilerplate), laakin tan macnaheedu kama dhigna in top-level await ay tahay badalka async functions-ka, balse ay tahay feature kaaso u baahan taxadir marka aan isticmalayno, iyada oo ay wanagsan tahay in aanad u isticmalin top-level await tasks-ka kuwaaso qaadanaya waqti badan si ay u noqdaan resolved.