Мушкили promise hell дар JavaScript

Шумо аллакай медонед, ки promise-ҳо барои ҳалли мушкили callback hell сохта шудаанд. Аммо, бо гузашти вақт маълум шуд, ки promise-ҳо низ метавонанд коди мураккаб ба вуҷуд оранд. Ин мушкили ба ташбиҳ бо номи promise hell номгузорӣ шуд.

Биёед ин мушкилиро бар рӯи мисолҳои код баррасӣ кунем. Бигзор мо функсияи getSmth дошта бошем, ки параметр гирифта ва натиҷаро вобаста ба ин параметр бармегардонад:

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

Дар ин ҳолат мо амали муфидеро (масалан, гирифтани маълумот аз сервер) тақлид мекунем. Ба ҳолати тақлид мо параметрро ҳамчун адад дода ва пас аз як сония квадрати он ададро бармегардонем.

Ҳоло биёед аз функсияи мо getSmth дар дохили функсияи дигар истифода барем:

function func() {
	getSmth(2).then(res => {
		console.log(res); // 4-ро хориҷ мекунад
	});
}

func();

Мушкили якум

Санҷишҳои зиёди then, ки пай дар пай меоянд, фаҳмиши кодро душвор мекунанд:

function func(){
	getSmth(2).then(res1 => {
		// чизе анҷом медиҳем
	}).then(res2 => {
		// чизе анҷом медиҳем
	}).then(res3 => {
		// чизе анҷом медиҳем
	}).then(res4 => {
		// чизе анҷом медиҳем
	}).then(res5 => {
		// чизе анҷом медиҳем
	}).then(res6 => {
		// чизе анҷом медиҳем
	});
}

func();

Мушкили дуюм

Мушкили дигар ҳам вуҷуд дорад. Бигзор ҳоло мо мехоҳем аз функсияи худ ду бор истифода барем, пас натиҷаҳоро ҷамъ кунем. Дар натиҷа мо чунин код хоҳем дошт:

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			console.log(res1 + res2); // 13-ро хориҷ мекунад
		});
	});
}

func();

Аллакай ба callback hell монанд аст, ҳаст? Як даъвати дигари функсия илова кунем - код ҳанӯз бадтар мешавад:

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

func();

Албатта, метавон аз Promise.all истифода бурд:

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

func();

Аммо, оё мо ҳамон чизро гирифтем? Не! Дар ҳолати якум ҳар як функсияи нав интизори ба охир расидани promise-и қаблӣ мебошад, аммо дар ҳолати дуюм - ҳамаи promise-ҳо ҳамзамон иҷро мешаванд. Ин фарқ дар он ҳолати аҳамият дорад, ки мо дар функсияи нав даъвати функсияи қаблиро мехоҳем гузаронем:

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

func();