Promise’lar

"Kelajakdagi natija kafolati (Promise)"

Promise asinxron operatsiyaning kelajakdagi natijasini ifodalaydi.

U hali mavjud bo‘lmagan qiymat uchun to‘ldiruvchi vazifasini bajaradi.

Amaliyot tugagach, Promise qiymat bilan bajariladi yoki xato bilan rad etiladi.

Nega Promiselar?

Oddiy asinxron operatsiyalar uchun callback funksiyalari juda qulay.

Biroq, bir nechta o‘zaro bog‘liq callbacklar kodni o‘qish va tushunishni ancha qiyinlashtiradi (callback hell holati yuzaga keladi).

Promiselar asinxron kodni tashkil qilishning yanada toza va o‘qilishi mumkin bo‘lgan usulini taqdim etadi.

Callback misoli

step1(function(result1) {
  step2(result1, function(result2) {
    step3(result2, function(result3) {
      display(result3);
    });
  });
});

Bu uslub ko‘pincha callback hell (callback’lar do‘zaxi) deb ataladi.

Promise’lar bilan xuddi shu oqim

step1()
  .then(step2)
  .then(step3)
  .then(display);

Kod tekislanadi va o‘qish osonroq bo‘ladi.

Promise holatlari

Har bir Promise har doim uchta holatdan birida bo‘ladi.

State	Tavsif
Pending	Operatsiya boshlandi, lekin tugamadi.
Fulfilled	Amal muvaffaqiyatli yakunlandi.
Rejected	Amal muvaffaqiyatsiz tugadi.

Pending
   │
   ├────────► Fulfilled
   │
   └────────► Rejected

Promise bajarilganda yoki rad etilganda bajariladi.

JavaScript API’lari qaytaradigan Promise’lar

Ko‘plab JavaScript API’lari Promise qaytaradi.

fetch() usuli bir misol.

Misol

fetch("fetch.txt")
.then(function(response) {
  return response.text();
})
.then(function(text) {
  myDisplayer(text);
})
.catch(function(error) {
  myDisplayer(error);
});

O‘zingiz sinab ko‘ring »

fetch() metodi darhol Promise qaytaradi.

Yuklab olish fonda davom etadi, JavaScript esa boshqa kodni ishga tushiradi.

then() qanday ishlaydi

then() usuli darhol chaqiriladi.

U Promise bajarilgandan so‘ng JavaScript chaqiradigan funksiyani ro‘yxatdan o‘tkazadi.

Ro‘yxatdan o‘tgan funksiya keyinroq Promise natijasi bo‘lganda ishlaydi.

then() ning har bir chaqiruvi yangi Promise qaytaradi.

then() metodining o‘zi kutmaydi.

U callback-ni qayd qiladi va darhol yangi Promise-ni qaytaradi.

Promise oqimi

fetch()
⮯
returns a Promise
⮯
then() registers a callback
⮯
JavaScript continues
⮯
Promise becomes fulfilled
⮯
callback runs

Misol

let promise = fetch("fetch.txt");

promise.then(function(response) {
return response.text();
});

myDisplayer("JavaScript continues...");

JavaScript yuklab olish tugashini kutmaydi.

Callback faqat Promise bajarilgandan keyin amalga oshiriladi.

O‘zingiz sinab ko‘ring »

then() ga o‘tkazilgan callback Promise-ning bajarilishi qiymatini oladi.

fetch() uchun bu qiymat Response obyektidir.

Keyingi bo‘limda siz o‘zingizning Promise-ingizni qanday yaratishni o‘rganasiz.

Promise yaratish

Ko‘pincha siz fetch() kabi JavaScript API tomonidan qaytarilgan Promiselardan foydalanasiz.

Ba’zan siz o‘zingizning Promise-ingizni yaratishingiz kerak bo‘ladi.

Promise() konstruktori bilan Promise yarating.

Sintaksis

const promise = new Promise(function(resolve, reject) {
  // Asynchronous work

  if (success) {
    resolve(value);
  } else {
    reject(error);
  }
});

Konstruktor ikki parametrli funksiyani qabul qiladi.

Parametr	Tavsif
`resolve`	Promise-ni qiymat bilan bajaradi.
`reject`	Xato bilan Promise-ni rad etadi.

Call either resolve() or reject().

Promise faqat bir marta bajarilishi mumkin.

Misol

Promise yaratish va undan foydalanish

O‘zingiz sinab ko‘ring »

then() metodi

then() metodi bajarilgan Promise’ni qayta ishlaydigan funksiyani ro‘yxatdan o‘tkazadi.

Ro‘yxatdan o‘tgan funksiya bajarish qiymatini oladi.

Misol

fetch("fetch.txt")
.then(function(response) {
return response.text();
})
.then(function(text) {
myDisplayer(text);
});

O‘zingiz sinab ko‘ring »

then() ning har bir chaqiruvi yangi Promise qaytaradi.

Bu Promise’larni zanjir qilib ulash imkonini beradi.

catch() usuli

catch() metodi rad etilgan Promise’ni qayta ishlaydigan funksiyani ro‘yxatdan o‘tkazadi.

Misol

fetch("missing.txt")
.then(function(response) {
  if (!response.ok) {
    throw new Error(response.statusText);
  }

  return response.text();
})
.then(function(text) {
  myDisplayer(text);
})
.catch(function(error) {
  myDisplayer(error.message);
});

O‘zingiz sinab ko‘ring »

Bitta catch() Promiselar zanjiridagi har qanday oldingi bosqichdagi xatolarni hal qilishi mumkin.

finally() usuli

finally() usuli Promise bajarilganda ishlaydigan funksiyani qayd qiladi.

Promise bajarilganmi yoki rad etilganmi ishlaydi.

Misol

fetch("fetch.txt")
.then(function(response) {
  return response.text();
})
.then(function(text) {
  myDisplayer(text);
})
.catch(function(error) {
  myDisplayer(error.message);
})
.finally(function() {
  myDisplayer("Finished");
});

O‘zingiz sinab ko‘ring »

Promise’larni zanjirlash

then() yangi Promise qaytargani uchun bir nechta asinxron amallarni zanjir qilib ulash mumkin.

Misol

O‘zingiz sinab ko‘ring »

Har bir qadam oldingi qadam tomonidan qaytarilgan Promise-ni kutadi.

Promise qaytarish

Agar then() callback’i boshqa asinxron amalni boshlasa, uning Promise’ini qaytaring.

To‘g‘ri

step1()
.then(function(value) {
return step2(value);
})
.then(function(value) {
myDisplayer(value);
});

Agar siz Promise-ni qaytarishni unutib qo‘ysangiz, zanjirning keyingi bosqichi asenkron operatsiya tugashidan oldin bajarilishi mumkin.

Promise bilan bog‘liq keng tarqalgan xatolar

Promise qaytarishni unutish

Agar then() callback’i boshqa asinxron amalni boshlasa, uning Promise’ini qaytaring.

Noto‘g‘ri

step1()
.then(function(value) {
step2(value);
})
.then(function(value) {
myDisplayer(value);
});

Ikkinchi then() step2() tugashidan oldin ishga tushishi mumkin.

To‘g‘ri

step1()
.then(function(value) {
return step2(value);
})
.then(function(value) {
myDisplayer(value);
});

Promise-ni qaytarish zanjirni to‘g‘ri tartibda saqlaydi.

Xatolarni qayta ishlashni unutish

Unhandled Promise rejections make debugging difficult.

Xatolarni qayta ishlash uchun catch()’dan foydalaning.

Misol

fetch("missing.txt")
.then(function(response) {
  if (!response.ok) {
    throw new Error(response.statusText);
  }

  return response.text();
})
.catch(function(error) {
  myDisplayer(error.message);
});

O‘zingiz sinab ko‘ring »

Promise’lar JavaScript’ni bloklaydi deb kutish

Promise yaratish JavaScript-ni pauza qilmaydi.

JavaScript asinxron operatsiya davom etayotganda ishlashni davom ettiradi.

Misol

myDisplayer("Start");

fetch("fetch.txt")
.then(function() {
myDisplayer("Finished");
});

myDisplayer("JavaScript continues");

O‘zingiz sinab ko‘ring »

Natija:

Start
JavaScript continues
Finished

Promises represent asynchronous operations.

Ular JavaScript-ni boshqa kodni bajarishini to‘xtatmaydi.

Promise’lar va asinxron dasturlash

Promise asinxron operatsiya natijasini ifodalaydi.

Asinxron ish odatda fetch() yoki setTimeout() kabi brauzer API tomonidan amalga oshiriladi.

Promise ushbu operatsiya tugagandan so‘ng natijani olishning toza usulini taqdim etadi.

Promise kodni asinxron qilmaydi.

U asinxron operatsiya natijasini ifodalaydi.

Promise’lar va Event Loop

Promise callback’lari darhol ishga tushmaydi.

Ular joriy JavaScript vazifasi tugallangandan so‘ng ishga tushirilishi rejalashtirilgan.

JavaScript Event Loop ushbu Callback-larni amalga oshirish uchun javobgardir.

Bu haqda JavaScript Event Loop bo‘limida ko‘proq bilib olasiz.

Promise’lar va callback’lar

Callbacks	Promises
Chuqur ichma-ich bo‘lib ketishi mumkin.	Zanjir qilib ulash mumkin.
Xatolarni qayta ishlash ko‘pincha kod bo‘ylab tarqalib ketadi.	Bitta `catch()` butun zanjirdagi xatolarni boshqarishi mumkin.
Murakkab amallarda o‘qish qiyinroq.	Bir nechta asinxron qadamlar uchun o‘qishga qulayroq.

Xulosa

Promise asinxron operatsiyaning kelajakdagi natijasini ifodalaydi.
Promise kutilayotgan (pending), bajarilgan (fulfilled) yoki rad etilgan (rejected) holatda bo‘ladi.
then() registers fulfillment handlers.
catch() registers rejection handlers.
finally() Promise bajarilganda ishlaydigan ishlov beruvchini qayd qiladi.
Promise zanjirlarini to‘g‘ri tartibda saqlash uchun then() Promiselarini qaytaring.
Most JavaScript APIs, including fetch(), return Promises.

Keyingi qadam

Promise’lar asinxron kodni tartibga solishni osonlashtiradi.

JavaScript shuningdek, async va await kalit so‘zlarini taqdim etadi, bu sizga va’daga asoslangan kodni sinxron JavaScriptga o‘xshash uslubda yozish imkonini beradi.

Async va Await ni o‘rganish uchun keyingi bobga o‘ting.

JavaScript Async/Await

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish