Problém callback hell v JavaScriptu

Předpokládejme, že chceme pomocí funkce loadImage načíst tři obrázky:

loadImage('img1.png', function(image, err) {
	document.body.append(image);
});
loadImage('img2.png', function(image, err) {
	document.body.append(image);
});
loadImage('img3.png', function(image, err) {
	document.body.append(image);
});

S tímto kódem je něco v nepořádku. Jde o to, že obrázky budou přidány do body jakmile se načtou. To znamená, že nám nikdo negarantuje, že obrázky budou přidány právě v pořadí, které potřebujeme.

Je tu ještě něco. Předpokládejme, že chceme udělat něco, až budou načteny všechny tři obrázky. V našem kódu jednoduše nemůžeme zachytit tento okamžik, protože všechny tři obrázky se načítají nezávisle.

Dobře, přepišme kód:

loadImage('img1.png', function(image1, err1) {
	document.body.append(image1);
	
	loadImage('img2.png', function(image2, err2) {
		document.body.append(image2);
		
		loadImage('img3.png', function(image3, err3) {
			document.body.append(image3);
			console.log('všechny obrázky jsou načteny');
		});
	});
});

Vyřešili jsme oba popsané problémy. Avšak jsme za to dostali jiný. Zatím ještě není moc viditelný, ale představte si, jak bude vypadat náš kód, pokud v něm bude načítání ne tří, ale řekněme deseti obrázků, plus bude přidáno zpracování výjimek. Ve výsledku se kód stane velmi nečitelným: složitost kódu lavinovitě narůstá při vnořování callbacků do sebe. Tato situace se nazývá callback hell - peklo callbacků.

Přepište uvedený kód tak, aby v něm bylo načítání 10 obrázků plus zpracování výjimek. Přesvědčte se, že vám vznikne situace callback hell.