Chapter 27 — Promises

Chapter 26'da Callback Hell muammosini ko'rdik. Promise — aynan shu muammoni hal qilish uchun ES6'da qo'shilgan, asinxron kod bilan ishlashning zamonaviy va tartibli usuli.

---

27.1 Promise nima?

Simple Explanation

Promise — kelajakda tugaydigan (yoki muvaffaqiyatli, yoki xatolik bilan) asinxron amalning **"va'dasi"**ni ifodalovchi object.

Real-Life Analogy

🎫 Promise'ni restoran chekiga o'xshating: taom buyurtma qilganingizda, sizga darhol taom emas, balki chek raqami (Promise) beriladi. Bu chek — "sizning taomingiz tayyor bo'lganda (yoki oshxonada muammo chiqsa) sizga xabar beriladi" degan va'da. Siz o'sha chek bilan boshqa ishlaringizni davom ettirasiz.

Promise'ning 3 xil holati (State)

Diagram

code.text
TEXTNusxalash
01        Promise yaratiladi
02              │
03          [Pending]
04           /        \
05          /          \
06    muvaffaqiyatli    xatolik
07         │                │
08    [Fulfilled]      [Rejected]

💡 Key Idea
Promise — bir marta Pendingdan Fulfilled yoki Rejectedga o'tgandan keyin, uning holati hech qachon o'zgarmaydi ("settled" bo'ladi). Bu — Promise'ning ishonchliligini ta'minlaydi.

27.2 Promise yaratish

Example

script.js
JavaScriptNusxalash
01let myPromise = new Promise(function (resolve, reject) {
02    let success = true;
03 
04    setTimeout(function () {
05        if (success) {
06            resolve("Amal muvaffaqiyatli bajarildi!");
07        } else {
08            reject("Xatolik yuz berdi!");
09        }
10    }, 1000);
11});

How It Works

1. new Promise(...) — Promise constructor'iga bitta function (executor) beriladi.
2. Executor ikkita parametrga ega: resolve (muvaffaqiyat uchun) va reject (xatolik uchun).
3. Amal muvaffaqiyatli tugasa — resolve(natija) chaqiriladi.
4. Xatolik bo'lsa — reject(xatolik) chaqiriladi.

27.3 then, catch, finally

Simple Explanation

Promise natijasini "iste'mol qilish" uchun then(), catch(), finally() metodlari ishlatiladi.

Example

script.js
JavaScriptNusxalash
01myPromise
02    .then(function (result) {
03        console.log("Muvaffaqiyat: " + result);
04    })
05    .catch(function (error) {
06        console.log("Xatolik: " + error);
07    })
08    .finally(function () {
09        console.log("Har doim ishga tushadi");
10    });

Jadval

🔗 Connection
.finally() — Chapter 18'dagi try/catch/finallyning Promise dunyosidagi analogi.

27.4 ⚠️ Qiyin mavzu: Promise Chaining (Zanjirlash)

Simple Explanation

.then() — har doim yangi Promise qaytaradi, shuning uchun uni zanjir shaklida ketma-ket yozish mumkin. Bu — Callback Hell muammosini hal qiladigan asosiy xususiyat.

Callback Hell'ni eslash

Chapter 26'da ko'rgan edik:

script.js
JavaScriptNusxalash
01getUser(1, function (user) {
02    getPosts(user.id, function (posts) {
03        getComments(posts[0].id, function (comments) {
04            console.log(comments);
05        });
06    });
07});

Xuddi shu narsa Promise bilan

script.js
JavaScriptNusxalash
01getUser(1)
02    .then(user => getPosts(user.id))
03    .then(posts => getComments(posts[0].id))
04    .then(comments => console.log(comments))
05    .catch(error => console.log("Xatolik: " + error));

Nima uchun bu ancha yaxshi?

• Chuqurlik yo'q — har bir qadam bir xil darajada, "o'ngga siljimaydi".
• Bitta catch — istalgan qadamda yuz bergan xatolik shu yagona catch orqali ushlanadi.
• O'qish tartibi — kod tepadan pastga, aynan bajarilish tartibida o'qiladi.

Diagram

code.text
TEXTNusxalash
01getUser(1)
02    │ .then()
03    ▼
04getPosts(user.id)
05    │ .then()
06    ▼
07getComments(posts[0].id)
08    │ .then()
09    ▼
10console.log(comments)
11 
12   (istalgan bosqichda xatolik bo'lsa,
13    zanjir darhol .catch()ga "sakraydi")

🔥 Important
Har bir .then() ichida qaytarilgan qiymat (yoki Promise) — keyingi .then()ga argument sifatida uzatiladi. Agar .then() ichida yana bir Promise qaytarilsa, zanjir o'sha Promise tugashini kutadi, keyin davom etadi.

27.5 Amaliy misol — to'liq Promise zanjiri

script.js
JavaScriptNusxalash
01function getUser(id) {
02    return new Promise((resolve, reject) => {
03        setTimeout(() => {
04            if (id > 0) {
05                resolve({ id: id, name: "Ali" });
06            } else {
07                reject("Noto'g'ri ID");
08            }
09        }, 500);
10    });
11}
12 
13function getPosts(userId) {
14    return new Promise((resolve) => {
15        setTimeout(() => {
16            resolve(["Post 1", "Post 2"]);
17        }, 500);
18    });
19}
20 
21getUser(1)
22    .then(user => {
23        console.log("Foydalanuvchi: " + user.name);
24        return getPosts(user.id);
25    })
26    .then(posts => {
27        console.log("Postlar: " + posts.join(", "));
28    })
29    .catch(error => {
30        console.log("Xatolik: " + error);
31    });

Natija:

code.text
TEXTNusxalash
01(500ms kutish)
02Foydalanuvchi: Ali
03(yana 500ms kutish)
04Postlar: Post 1, Post 2

27.6 Promise.all() — bir nechta Promise'ni parallel kutish

Simple Explanation

Promise.all() — bir nechta Promise'ni bir vaqtda (parallel) bajarib, barchasi tugaguncha kutadi.

Real-Life Analogy

🍽️ Agar 3 ta taomni ketma-ket emas, bir vaqtning o'zida buyurtma qilsangiz (parallel), va faqat hammasi tayyor bo'lgach stolga olib kelinishini kutsangiz — bu Promise.all().

Example

script.js
JavaScriptNusxalash
01let promise1 = new Promise(resolve => setTimeout(() => resolve("Birinchi"), 1000));
02let promise2 = new Promise(resolve => setTimeout(() => resolve("Ikkinchi"), 2000));
03let promise3 = new Promise(resolve => setTimeout(() => resolve("Uchinchi"), 1500));
04 
05Promise.all([promise1, promise2, promise3])
06    .then(results => {
07        console.log(results); // ["Birinchi", "Ikkinchi", "Uchinchi"]
08    });
09 
10// Umumiy kutish vaqti: ~2000ms (eng uzunisiga qarab, YIG'INDI EMAS!)

Explanation

Agar bu 3 ta amal ketma-ket (.then() zanjiri orqali) bajarilganda, umumiy vaqt $1000 + 2000 + 1500 = 4500$ms bo'lardi. Promise.all() bilan esa ular parallel ishlagani uchun, umumiy vaqt eng uzun Promise'ning vaqtiga (2000ms) teng bo'ladi.

⚠️ Common Mistake
Promise.all() — agar birorta Promise reject bo'lsa, darhol butun Promise.all() rad etiladi (reject), garchi qolganlari muvaffaqiyatli bo'lsa ham. Agar barcha natijalarni (muvaffaqiyatli yoki yo'q) olish kerak bo'lsa, Promise.allSettled() ishlatiladi.

Promise.race() va Promise.allSettled()

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
checkAge(age) nomli Promise qaytaruvchi function yozing — agar age >= 18 bo'lsa resolve("Kattasiz"), aks holda reject("Kichiksiz") chaqirsin. .then()/.catch() bilan sinab ko'ring.
Required Concepts:

• new Promise
• resolve/reject
  Hint:
  new Promise((resolve, reject) => { if (age >= 18) resolve(...); else reject(...); })

🟡 Exercise 2 — Medium

Task:
Ikkita Promise qaytaruvchi function yozing: step1() (1 soniyada "Bosqich 1" qaytaradi) va step2(data) (datani qabul qilib, yana 1 soniyada data + " → Bosqich 2" qaytaradi). Ularni .then() zanjiri orqali ketma-ket chaqiring.
Required Concepts:

• Promise chaining
  Hint:
  Chapter 27.5'dagi misolga o'xshab yozing.

🔴 Exercise 3 — Hard

Task:
Uchta Promise yarating (turli kutish vaqtlari bilan, ba'zilari reject bo'ladigan qilib). Promise.allSettled() yordamida barcha natijalarni (muvaffaqiyatli yoki xato) alohida-alohida chiqaring.
Required Concepts:

• Promise.allSettled()
  Hint:
  Natija — { status: "fulfilled", value: ... } yoki { status: "rejected", reason: ... } shaklidagi object'lar array'i bo'ladi.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01console.log("A");
02 
03Promise.resolve().then(() => console.log("B"));
04 
05console.log("C");

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

<details> <summary>Answer</summary> A C B

Why?
Promise.resolve().then(...) — garchi Promise darhol hal qilingan (resolved) bo'lsa ham, .then() ichidagi kod baribir asinxron (mikrotask navbatida) bajariladi, ya'ni joriy sinxron kod ("A", "C") to'liq tugagandan keyingina ishga tushadi. Bu — Chapter 29'da (Event Loop) chuqurroq tushuntiriladi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01function getData() {
02    return new Promise((resolve, reject) => {
03        setTimeout(() => {
04            resolve("Ma'lumot");
05        }, 1000);
06    });
07}
08 
09getData().then(data => {
10    console.log(data);
11});
12 
13console.log("Bu birinchi chiqishi kerak edi, lekin chiqmayapti");

Your Task:

• Kod nima natija berishini bashorat qiling.
• Aslida bu yerda "xato" bormi, yoki dasturchining tushunchasida xato bormi?

<details> <summary>Solution</summary> Tushuntirish: Bu yerda kod aslida to'g'ri ishlaydi — muammo dasturchining kutishida. getData().then(...) — asinxron, shuning uchun console.log("Bu birinchi...") avval, console.log(data) esa 1 soniyadan keyin chiqadi. Natija:

Bu birinchi chiqishi kerak edi, lekin chiqmayapti
(1 soniyadan keyin)
Ma'lumot

Xulosa: Bu — kod xatosi emas, balki Promise'ning tabiiy asinxron xatti-harakati. Agar tartib muhim bo'lsa, console.logni .then() ichiga joylashtirish kerak (Chapter 28'da async/await bu holatni yanada tushunarli qiladi).

</details>

📌 Chapter Summary

• Promise — asinxron amalning kelajakdagi natijasini ifodalovchi object, 3 holatga ega: pending, fulfilled, rejected.
• .then(), .catch(), .finally() — Promise natijasini qayta ishlash uchun.
• Promise Chaining — Callback Hell'ni tekis, o'qish oson zanjirga aylantiradi.
• Promise.all() — bir nechta Promise'ni parallel bajarib, barchasi tugashini kutadi.
• Promise.allSettled() — barcha natijalarni (muvaffaqiyat/xato) qaytaradi, birortasi rad etsa ham to'xtamaydi.

🎯 Key Takeaways

• Promise — Callback Hell muammosini "tekis" zanjir orqali hal qiladi.
• Har bir .then() — yangi Promise qaytaradi, shuning uchun zanjirlash mumkin.
• Bitta .catch() — zanjirdagi istalgan bosqichdagi xatolikni ushlaydi.
• Promise.all() — parallel bajarish orqali umumiy kutish vaqtini qisqartiradi.
• Promise natijasi — hatto darhol resolve bo'lsa ham, har doim asinxron tarzda qayta ishlanadi.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01let promise = new Promise((resolve, reject) => {
02    if (/* muvaffaqiyat */) resolve(value);
03    else reject(error);
04});
05 
06promise
07    .then(value => { })
08    .catch(error => { })
09    .finally(() => { });
10 
11Promise.all([p1, p2, p3]).then(results => { });
12Promise.allSettled([p1, p2, p3]).then(results => { });
13Promise.race([p1, p2, p3]).then(first => { });

---