Promise nima va qanday ishlatiladi ?
Josh*Assalaamu alaykum.
Demak, bu safargi maqolamiz mavzusi 'Promise'lar.
Bismillah.
Bundan oldingi maqolamizda "Callback"lar bilan tanishdik. 2015-yil ya'ni, JavaScriptning ES6 versiyasigacha bu turdagi "ichma-ich funksiya"lar asinxronlikni boshqarishning yagona yechimi edi. Bu kichikroq turdagi dasturlar uchun normal, biroq dastur kattalashgan sari, yozilgan kod tushunarsiz bo'lib boraverar edi. Bu "Callback hell" nomi bilan ham mashhur.
Ushbu rasm bunga misol:
Bunga yechim kerak edi va aynan shu sababli JS "Promise"larni e'lon qildi.
Ingliz tiliga murojaat qiladigan bo'lsak , Promise so'zining ma'nosi "Va'da" degani.
Nega aynan shu nom tanlangan ? 🤔
Keling hammasini sodda tilda, hayotiy misollar bilan tushunib olamiz.
Barchamiz va'da berish nima ekanligini yaxshi bilamiz.
Maqolamiz davomida ushbu hayotiy misoldan foydalanamiz. Tasavvur qiling:
Men kanalda Angular texnologiyasini 10 kunda o'rgatishga va'da berdim.
Ammo, bu hali shunchaki va'da holos, bu va'damni ustidan yoki rostan ham chiqaman yoki yo'q. Ya'ni 10 kunda ushbu Angular texnologiyasini rostan ham o'rgataman yoki ba'zi sabablarga ko'ra o'rgata olmayman.
Buning natijasini faqatgina 10 kundan keyingina bilishimiz mumkin.
Endi esa ushbu jarayonni ushbu rasmdan yaxshilab ko'rib olsak.
Xo'sh, menimcha hayotiy misolni tushunib oldik.
Endi, mavzuyimizga qaytamiz.
Ushbu tepadagi rasm va misollarni ko'rsatganimni sababi shuki, Dasturimizda ham aynan shunday holatlarga duch kelamiz, biror asinxron yoki uzoq vaqt oladigan sinxron jarayonimiz bo'ladi. (Misol uchun 10 soniya oladi, xuddi tepadagi hayotiy misolda 10 kundek). Ushbu jarayonni boshqarish esa bilganingizdek juda qiyin avvalki darslarda aytganimdek.
Promise bu - asinxron kodlarni va uzoq vaqt talab qiladigan kodlarni olib, biror natija qaytishiga va'da beradigan va ushbu kodlarni o'zi ishlatib olib, natijasini qaytaradigan obyekt. Misol uchun, bir jarayonni oladi, va'da beradi (bu jarayon yo bajariladi yoki bajarilmay xatolik qaytadi degan). So'ngra jarayonni o'z ichida ishlashni boshlaydi, to'g'ri bajarilsa, bajarilgan qiymatni, kutilgandek bajarilmasa xatolikni qaytaradi.
Ushbu rasmga yaxshilab e'tibor bering. Bu yerda Promisening qanday ishlashini yozganman:
Keling tepadagi hayotiy misolni dasturga o'giramiz va qayta tahlil qilamiz, 10 kun o'rniga 10 soniya bo'ladi.
const myPromise = new Promise( (resolve, reject) => {
setTimeout( () => {
let natija = "Uddaladim";
resolve(natija);
} , 10000)
} );
myPromise.then( natija => {
alert(natija); // Uddaladim
})
Xo'sh, ushbu kodimiz Promiselarning eng oddiy ko'rinishlaridan biri. Bu yerda Promisening vazifani uddalaganiga misol yozilgan. Ya'ni, vazifa resolve() bo'lgan va natijani olish uchun .then() metodidan foydalanilgan. Rasmga yana bir bor e'tibor bering.
Endi agar, va'daning ustidan chiqolmasak, ya'ni kutilgan natija kelmasa, reject() orqali bajarilmaganini e'lon qilamiz va .catch() orqali kelgan sababni olamiz. Bunday:
myPromise = new Promise( (resolve, reject) => {
setTimeout( () => {
let sabab = "Vaqtim yetmagani uchun uddalay olmadim";
reject(sabab);
} , 10000)
} );
myPromise.catch(xato=> {
alert(xato); // Vaqtim yetmagani uchun uddalay olmadim
})
P.s: Hozir biz shunchaki Promisening ichida setTimeout ishlatdik. Ammo haqiqiy dasturlarda bunday bo'lmaydi. HTTP so'rovlar, uzoq vaqt oladigan jarayonlar, bir-birini kutishi kerak bo'lgan asinxron jarayonlar va hkz.larda ishlatiladi.
"Bo'ldimi ? Shu Promise mi ? Hehe, oson ekanku, o'rganib oldim 😂😂" deyayotgan bo'lsangiz shoshilmang.
Ha, Promiselarning asosan shunday ishlaydi. Ammo, biz hali haqiqiy dasturlarda ishlatib ko'rmadik.
Shu sabab, maqola oxirida Promisedan foydalanib Http so'rov ham yuborib ko'ramiz.
Promiselarning ustun taraflaridan biri shuki, biz bir Promisedan kelgan natijani .then() orqali olib turib, yana yangi promise qaytara olishimiz mumkin.
Bu orqali, asinxron jarayonlarni bir biriga ulab ketamiz.
Misol uchun, keling 10 sekundda ishlaydigan Promisega 5 sekundda ishlaydigan ikkinchi Promiseni ulaymiz va yana 5 sekunddan keyin natijalarni chiqaramiz. Eng qiziqi ikkinchi Promise birinchisidan kelgan qiymatni o'qiy olishi kerak.
const birinchiPromise = new Promise( (resolve, reject) => {
setTimeout( () => {
let natija = "Uddaladim";
resolve(natija);
} , 10000)
} );
birinchiPromise.then( natija => {
return new Promise( (resolve, reject) => {
setTimeout( () => {
resolve("Birinchisidan kelgan natija: " + natija);
} , 5000)
} );
}).then(natija => {
setTimeout( () => {
alert("Oxirgi natija " + natija) // Oxirgi natija Birinchisidan kelgan natija: Uddaladim
} , 5000)
})
Ko'rib turganingizdek, .then().then().then() ko'rinishida Promise zanjirini yasadik. Bunday holatlar juda ko'p, qiyin va oson ko'rinishlari ham.
Endi keling real misol ishlab ko'ramiz.
XHR ishlatgan holda HTTP so'rov yuborib "Foydalanuvchilar" ro'yhatini olish topshirildi bizga.
getUsers degan funksiya ochamiz va undan biz yasab olgan, so'rov yuborib, javobini kutib turadigan Promiseni qaytaramiz va shu funksiyaga then va catch metodlari orqali ulanib, xatolik kelsa xatolikni, kutilgan natija kelsa natijani konsolga chiqaramiz.
Kod uzun bo'lgani uchun rasmga oldim, marhamat tanishib chiqing:
Mana Azizlar Promiselar haqida qisqacha bilimga ega bo'ldik.
Keyingi maqolamizda Promisening boshqa metodlari va ishlatish holatlari bilan tanishamiz. InshaaAlloh.
Demak bizda faqatgina then() va catch() emas ekan.😉
Ungacha o'zingiz ham bilimingizni yanada rivojlantirib tursangiz bo'ladi. Ushbu linklardagi maqolalar Promiselar haqida.
https://javascript.info/promise-basics
https://www.w3schools.com/js/js_promise.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
Biz esa davom etamiz, demak keyingi mavzuyimiz 'Promise metodlari va ishlatish holatlari' deb nomlanadi.
Ungacha bu maqolani va berilgan linklardagilarni yaxshilab o'rganib chiqing.
Sabr tilayman 😂.