Het probleem van promise hell in JavaScript

Je weet al dat promises zijn gemaakt om het probleem van callback hell op te lossen. Echter, met de tijd bleek dat promises ook complexe code kunnen voortbrengen. Dit probleem werd naar analogie promise hell genoemd.

Laten we dit probleem bekijken aan de hand van voorbeelden code. Stel we hebben een functie getSmth, die een parameter ontvangt en een resultaat teruggeeft afhankelijk van deze parameter:

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

In dit geval simuleren we een nuttige operatie (bijvoorbeeld het ophalen van gegevens van een server). Als simulatie geven we simpelweg een getal door als parameter en geven we na een seconde het kwadraat van dat getal terug.

Laten we nu onze functie gebruiken getSmth binnen een andere functie:

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

func();

Eerste probleem

Veel opeenvolgende constructies then bemoeilijken het begrijpen van de code:

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

func();

Tweede probleem

Er is ook een probleem van een andere aard. Stel dat we nu onze functie twee keer willen gebruiken, en vervolgens de resultaten optellen. Als resultaat krijgen we deze code:

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

func();

Doet al denken aan callback hell, nietwaar? Laten we nog één functieaanroep toevoegen - de code wordt nog erger:

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

func();

We kunnen natuurlijk gebruikmaken van Promise.all:

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

func();

Maar, hebben we hetzelfde gekregen? Nee! In het eerste geval wacht elke nieuwe functie op de voltooiing van de vorige promise, terwijl in het tweede geval - alle promises gelijktijdig worden uitgevoerd. Dit verschil zal essentieel zijn in het geval wanneer we in de volgende functie de aanroep van de vorige wil doorgeven:

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

func();