Chapter 28 — Async/Await

Chapter 27'da Promise'lar Callback Hell'ni qanday hal qilishini ko'rdik. async/await — ES2017'da qo'shilgan, Promise'lar ustiga qurilgan, asinxron kodni xuddi sinxron koddek yozish imkonini beruvchi sintaksis.

---

28.1 async/await nima?

Simple Explanation

• async — functionni asinxron deb belgilaydi, bu function har doim Promise qaytaradi.
• await — Promise tugashini kutadi, va uning natijasini to'g'ridan-to'g'ri qiymat sifatida qaytaradi (.then() yozmasdan).

Real-Life Analogy

⏸️ await — bu "shu yerda pauza qiling, natija kelguncha kuting" degan buyruq, lekin dastur butunlay to'xtab qolmaydi — u faqat o'sha async function ichida "pauza" qiladi, boshqa kod (masalan, boshqa function'lar) baribir ishlayveradi.

Example — Promise bilan solishtirish

script.js
JavaScriptNusxalash
01// Promise bilan (Chapter 27)
02function getUser() {
03    return fetch("/api/user")
04        .then(response => response.json())
05        .then(data => {
06            console.log(data);
07        })
08        .catch(error => console.log(error));
09}

script.js
JavaScriptNusxalash
01// async/await bilan (xuddi shu mantiq, ancha tushunarli)
02async function getUser() {
03    try {
04        let response = await fetch("/api/user");
05        let data = await response.json();
06        console.log(data);
07    } catch (error) {
08        console.log(error);
09    }
10}

Explanation

Ikkala kod ham aynan bir xil ishlaydi, lekin async/await versiyasi xuddi oddiy, sinxron koddek o'qiladi — .then() zanjirlarisiz.

🔥 Important
await — faqat async function ichida ishlatilishi mumkin (yoki zamonaviy modul darajasida, "top-level await"). Oddiy function ichida await yozish — sintaksis xatoligiga olib keladi.

28.2 async function har doim Promise qaytaradi

Simple Explanation

Bu — ko'pchilikni chalg'itadigan, lekin muhim qoida: async function hech qachon to'g'ridan-to'g'ri qiymat qaytarmaydi, u har doim shu qiymat bilan resolve bo'lgan Promise qaytaradi.

Example

script.js
JavaScriptNusxalash
01async function getNumber() {
02    return 42;
03}
04 
05console.log(getNumber()); // Promise {<fulfilled>: 42} — son emas!
06 
07getNumber().then(value => {
08    console.log(value); // 42 — bu yerda haqiqiy qiymat
09});

Explanation

getNumber() — 42ni to'g'ridan-to'g'ri qaytarmaydi, u Promise.resolve(42)ga teng natija qaytaradi. Haqiqiy qiymatni olish uchun .then() yoki boshqa async function ichida await kerak.

💡 Key Idea
async function yozish — aslida functionni avtomatik ravishda Promise qaytaradigan qilib "o'rab olish"ning qisqa yo'li.

28.3 ⚠️ Qiyin mavzu: await ketma-ketligi va parallellik

Simple Explanation

awaitlarni ketma-ket yozish — har birini navbat bilan kutadi, bu esa ba'zida keraksiz sekinlikka olib kelishi mumkin.

Muammoli misol — keraksiz ketma-ketlik

script.js
JavaScriptNusxalash
01async function loadData() {
02    let user = await getUser();     // 1 soniya kutadi
03    let posts = await getPosts();   // yana 1 soniya kutadi (lekin user'ga bog'liq emas!)
04    let comments = await getComments(); // yana 1 soniya
05 
06    console.log(user, posts, comments);
07}
08// Umumiy vaqt: ~3 soniya

Nima uchun bu noto'g'ri (samarasiz)?
Agar getPosts() va getComments() — userga bog'liq bo'lmasa (ya'ni ular bir-biridan mustaqil ma'lumot olishsa), ularni ketma-ket kutishning hojati yo'q — ular parallel ishlashi mumkin edi.

Yechim — Promise.all() bilan parallellashtirish

script.js
JavaScriptNusxalash
01async function loadData() {
02    let [user, posts, comments] = await Promise.all([
03        getUser(),
04        getPosts(),
05        getComments()
06    ]);
07 
08    console.log(user, posts, comments);
09}
10// Umumiy vaqt: ~1 soniya (eng uzunisiga qarab)

Diagram — Ketma-ket vs Parallel

code.text
TEXTNusxalash
01Ketma-ket (sekin):
02getUser() ──1s──> getPosts() ──1s──> getComments() ──1s──>
03Jami: 3s
04 
05Parallel (tez):
06getUser()     ──1s──┐
07getPosts()    ──1s──┤→ hammasi birga tugaydi
08getComments() ──1s──┘
09Jami: 1s

⚠️ Common Mistake
awaitlarni avtomatik ravishda ketma-ket yozish — eng ko'p uchraydigan async/await xatosi. Har doim o'zingizdan so'rang: "bu amallar bir-biriga bog'liqmi, yoki mustaqilmi?" Agar mustaqil bo'lsa — Promise.all() ishlatish kerak.

🔗 Connection
Bu — Chapter 27.6'da o'rgangan Promise.all()ning async/await bilan birgalikda ishlatilishi.

28.4 Xatolarni boshqarish — try/catch

Simple Explanation

async/await bilan ishlaganda, Chapter 18'da o'rgangan oddiy try/catch ishlatiladi — bu Callback'lardagidek maxsus naqshlar (error-first) yoki Promise'lardagidek .catch() shart emas.

Example

script.js
JavaScriptNusxalash
01async function fetchUserData(id) {
02    try {
03        let response = await fetch(`/api/users/${id}`);
04 
05        if (!response.ok) {
06            throw new Error("Server xatoligi: " + response.status);
07        }
08 
09        let data = await response.json();
10        return data;
11    } catch (error) {
12        console.log("Xatolik yuz berdi: " + error.message);
13        return null;
14    }
15}

Explanation

Bu — Chapter 26.5'da ko'rgan "try/catch callback ichidagi xatoni ushlamaydi" muammosining hal qilingan versiyasi: async/await bilan awaitlangan Promise reject bo'lsa, bu xatolik oddiy throw kabi ishlaydi va try/catch uni to'g'ri ushlaydi.

🔥 Important
Aynan shu xususiyat — async/awaitning eng katta afzalliklaridan biri: asinxron kod bilan ishlashda, sinxron kod uchun tanish bo'lgan try/catch mexanizmidan foydalanish mumkin bo'ladi.

28.5 for...of loop ichida await

Simple Explanation

await — oddiy for...of loop ichida to'g'ridan-to'g'ri ishlatilishi mumkin, bu esa ketma-ket asinxron amallarni oson yozish imkonini beradi.

Example

script.js
JavaScriptNusxalash
01async function processUsers(userIds) {
02    for (let id of userIds) {
03        let user = await getUser(id);
04        console.log(user.name);
05    }
06}

⚠️ Common Mistake
awaitni forEach() ichida ishlatish — kutilganidek ishlamaydi, chunki forEach() awaitni "kutmaydi":

script.js
JavaScriptNusxalash
01// ❌ Noto'g'ri
02userIds.forEach(async (id) => {
03    let user = await getUser(id);
04    console.log(user.name);
05});
06// Barcha so'rovlar deyarli bir vaqtda "otiladi", tartib kafolatlanmaydi

✅ To'g'ri — agar ketma-ketlik muhim bo'lsa, oddiy for...of ishlatiladi (yuqoridagi misolda ko'rgandek).

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
getGreeting(name) nomli async function yozing — u setTimeout orqali (Promise ichiga o'rab) 1 soniyadan keyin "Salom, " + nameni qaytarsin. Uni boshqa async function ichida await bilan chaqiring.
Required Concepts:

• async/await
  Hint:
  setTimeoutni Promise bilan o'rab oling: new Promise(resolve => setTimeout(() => resolve(...), 1000)).

🟡 Exercise 2 — Medium

Task:
Chapter 27.5'dagi getUser/getPosts Promise function'laridan foydalanib, ularni async/await va try/catch bilan qayta yozing.
Required Concepts:

• async/await
• try/catch
  Hint:
  let user = await getUser(1); let posts = await getPosts(user.id);

🔴 Exercise 3 — Hard

Task:
3 ta mustaqil (bir-biriga bog'liq bo'lmagan) Promise qaytaruvchi function yarating (turli kutish vaqtlari bilan). Ularni avval ketma-ket (await bilan birma-bir), keyin parallel (Promise.all() bilan) chaqirib, ikkala usulning umumiy ishlash vaqtini solishtiring (Date.now() yordamida, Chapter 20).
Required Concepts:

• async/await
• Promise.all()
• Date (Chapter 20)
  Hint:
  Har ikkala usulda ham boshida va oxirida Date.now()ni saqlab, farqini hisoblang.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01async function test() {
02    console.log("1");
03    await new Promise(resolve => setTimeout(resolve, 1000));
04    console.log("2");
05}
06 
07console.log("A");
08test();
09console.log("B");

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> A 1 B (1 soniyadan keyin) 2

Why?
test() chaqirilganda, uning ichidagi kod awaitgacha sinxron tarzda ishlaydi — shuning uchun "1" darhol chiqadi. await uchraganda, function "pauza" qiladi va boshqaruvni tashqi kodga qaytaradi, shuning uchun "B" "1"dan keyin, lekin "2"dan oldin chiqadi. 1 soniyadan keyin, Promise hal qilingach, test() davom etib "2"ni chiqaradi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01async function getTotalPrice(itemIds) {
02    let total = 0;
03 
04    itemIds.forEach(async (id) => {
05        let price = await getPrice(id);
06        total += price;
07    });
08 
09    return total; // Har doim 0 qaytaradi!
10}

Your Task:

• Nima uchun total har doim 0 qaytarishini tushuntiring.
• Kodni for...of yordamida tuzating.

<details> <summary>Solution</summary> Muammo: forEach() — awaitni "kutmaydi". forEach ichidagi async callback'lar barchasi deyarli bir vaqtda ishga tushiriladi, lekin getTotalPrice function'ining o'zi ularni kutmasdan, darhol return totalga (hali 0 bo'lgan holda) yetib boradi.

Yechim:

script.js
JavaScriptNusxalash
01async function getTotalPrice(itemIds) {
02    let total = 0;
03 
04    for (let id of itemIds) {
05        let price = await getPrice(id);
06        total += price;
07    }
08 
09    return total; // Endi to'g'ri ishlaydi
10}

</details>

📌 Chapter Summary

• async function — har doim Promise qaytaradi, garchi ichida oddiy qiymat return qilinsa ham.
• await — Promise tugashini kutadi va uning natijasini to'g'ridan-to'g'ri qiymat sifatida beradi.
• try/catch — asinxron xatolarni sinxron kodga o'xshash tarzda boshqarish imkonini beradi.
• Mustaqil asinxron amallarni ketma-ket await qilish — samarasiz, Promise.all() afzalroq.
• forEach() ichida await ishlamaydi — for...of ishlatish kerak.

🎯 Key Takeaways

• async/await — Promise ustiga qurilgan, asinxron kodni sinxrondek o'qilishini ta'minlaydigan sintaksis.
• Bir-biriga bog'liq bo'lmagan amallarni parallel (Promise.all()) bajarish tezroq.
• Xatolarni boshqarish uchun oddiy try/catch ishlatiladi.
• awaitni forEach() ichida emas, for...of ichida ishlating.
• async function'ning natijasini olish uchun har doim await yoki .then() kerak.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01async function fetchData() {
02    try {
03        let result = await someAsyncOperation();
04        return result;
05    } catch (error) {
06        console.log(error.message);
07    }
08}
09 
10// Parallel bajarish
11async function loadAll() {
12    let [a, b, c] = await Promise.all([taskA(), taskB(), taskC()]);
13}
14 
15// Ketma-ket loop
16async function processAll(items) {
17    for (let item of items) {
18        await processItem(item);
19    }
20}

---