JavaScript-da Promise Hell muammosi

Siz allaqachon bilasizki, promiseler callback hell muammosini hal qilish uchun yaratilgan edi. Biroq, vaqt o'tishi bilan shu narsa ma'lum bo'ldiki, promiseler ham murakkab kodni vujudga keltirishi mumkin. Ushbu muammo o'xshashlik asosida promise hell deb nomlandi.

Keling, ushbu muammoni kod misollari orqali ko'rib chiqaylik. Faraz qilaylik, bizda getSmth funksiyasi mavjud bo'lib, u parametr oladi va shu parametrga qarab natija qaytaradi:

function getSmth(num) {
	return new Promise((resolve, reject) => {
		setTimeout(() => resolve(num * num), 1000)
	});
}

Bu holda biz ma'lum bir foydali operatsiyani (masalan, serverdan ma'lumot olishni) imitasiya qilmoqdamiz. Imitatsiya sifatida biz shunchaki parametr sifatida raqamni uzatamiz va bir soniyadan so'ng shu raqamning kvadratini qaytaramiz.

Keling, endi bizning getSmth funksiyamizdan boshqa funksiya ichida foydalanaylik:

function func() {
	getSmth(2).then(res => {
		console.log(res); // 4 ni chiqaradi
	});
}

func();

Birinchi muammo

Bir-birining ortidan keluvchi ko'plab then konstruksiyalari kodni tushunishni qiyinlashtiradi:

function func(){
	getSmth(2).then(res1 => {
		// nimadir qilamiz
	}).then(res2 => {
		// nimadir qilamiz
	}).then(res3 => {
		// nimadir qilamiz
	}).then(res4 => {
		// nimadir qilamiz
	}).then(res5 => {
		// nimadir qilamiz
	}).then(res6 => {
		// nimadir qilamiz
	});
}

func();

Ikkinchi muammo

Boshqa tomondan ham muammo mavjud. Faraz qilaylik, endi biz o'zimizning funksiyamizdan ikki marta foydalanib, keyin natijalarni qo'shmoqchimiz. Natijada bizga quyidagi kod hosil bo'ladi:

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			console.log(res1 + res2); // 13 ni chiqaradi
		});
	});
}

func();

Bu allaqachon callback hell ni eslatayapti, shunday emasmi? Yana bir funksiya chaqiruvini qo'shamiz - kod yanada yomonroq bo'ladi:

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			getSmth(4).then(res3 => {
				console.log(res1 + res2 + res3);
			});
		});
	});
}

func();

Albatta, Promise.all dan foydalanish mumkin:

function func() {
	Promise.all([getSmth(2), getSmth(3), getSmth(4)]).then(res => {
		console.log(res[0] + res[1] + res[2]);
	});
}

func();

Biroq, biz bir xil narsani oldikmi? Yo'q! Birinchi holatda har bir yangi funksiya oldingi promisening tugashini kutadi, ikkinchi holatda esa - barcha promiseler bir vaqtning o'zida bajariladi. Bu farq keyingi funksiyaga oldingi chaqiruvni uzatmoqchi bo'lganimizda muhim ahamiyatga ega bo'ladi:

function func() {
	getSmth(2).then(res1 => {
		getSmth(res1).then(res2 => {
			getSmth(res2).then(res3 => {
				console.log(res3);
			});
		});
	});
}

func();