Die promise hell probleem in JavaScript

Jy weet reeds dat beloftes geskep is om die callback hell probleem op te los. Met verloop van tyd het dit egter geblyk dat beloftes ook ingewikkelde kode kan veroorsaak. Hierdie probleem is by analogie promise hell genoem.

Kom ons kyk na hierdie probleem aan die hand van kodevoorbeelde. Laat ons sê ons het 'n funksie getSmth, wat 'n parameter ontvang en 'n resultaat teruggee afhangende van daardie parameter:

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

In hierdie geval boots ons 'n nuttige handeling na (byvoorbeeld, om data van 'n bediener te kry). As nabootsing gee ons eenvoudig 'n nommer as parameter deur en gee die kwadraat van daardie getal na 'n sekonde terug.

Kom ons gebruik nou ons funksie getSmth binne 'n ander funksie:

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

func();

Eerste probleem

Talle opeenvolgende then konstruksies maak die kode moeilik om te verstaan:

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

func();

Tweede probleem

Daar is ook 'n ander soort probleem. Kom ons sê nou ons wil ons funksie twee keer gebruik, dan die resultate optel. As gevolg daarvan sal ons die volgende kode hê:

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

func();

Dit begin al na callback hell lyk, is dit nie? Kom ons voeg nog een funksie-aanroep by - die kode sal selfs erger word:

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

func();

Ons kan natuurlik Promise.all gebruik:

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

func();

Het ons egter dieselfde resultaat gekry? Nee! In die eerste geval wag elke nuwe funksie vir die voltooiing van die vorige belofte, terwyl in die tweede geval - al die beloftes gelyktydig uitgevoer word. Hierdie verskil sal aansienlik wees in die geval wanneer ons die resultaat van die vorige een wil deurgee aan die volgende funksie:

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

func();