Проблема promise hell во JavaScript

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