Problem callback hell w JavaScript

Załóżmy, że chcemy za pomocą funkcji loadImage załadować trzy obrazy:

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);
});

Z tym kodem jest coś nie tak. Chodzi o to, że obrazy będą dodawane do body w miarę ich ładowania. Oznacza to, że nikt nie gwarantuje nam, że obrazy zostaną dodane właśnie w tej kolejności, której potrzebujemy.

Jest jeszcze coś. Załóżmy, że chcemy zrobić coś, gdy wszystkie trzy obrazy zostaną załadowane. W naszym kodzie po prostu nie będziemy w stanie wyłapać tego momentu, ponieważ wszystkie trzy obrazy ładują się niezależnie.

Okay, przeróbmy kod:

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('wszystkie obrazy załadowane');
		});
	});
});

Rozwiązaliśmy oba opisane problemy. Jednakże, otrzymaliśmy w zamian inny. Na razie jeszcze nie jest on mocno widoczny, ale wyobraźcie sobie, jak będzie wyglądał nasz kod, jeśli będzie w nim ładowanie nie trzech, a, powiedzmy, dziesięciu obrazów, plus zostanie dodana obsługa wyjątków. W rezultacie kod stanie się bardzo nieczytelny: złożoność kodu lawinowo narasta przy zagnieżdżeniu callbacków. Taka sytuacja nazywa się callback hell - piekło callbacków.

Przepisz podany kod tak, aby zawierał on ładowanie 10 obrazów plus obsługę wyjątków. Upewnij się, że otrzymujesz sytuację callback hell.