Проблема promise hell у JavaScript-у

Већ знате да су промисови креирани да реше проблем callback hell-a. Међутим, временом се показало да промисови такође могу довести до сложеног кода. Овај проблем је по аналогији назван 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();

Међутим, да ли смо добили исто? Не! У првом случају свака нова функција чека завршетак претходног промиса, а у другом случају - сви промисови се извршавају истовремено. Ова разлика ће бити битна у случају када бисмо у следећу функцију желели да проследимо резултат претходне:

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

func();