Das Problem des Callback Hell in JavaScript

Angenommen, wir möchten mit der Funktion loadImage drei Bilder laden:

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

Mit diesem Code stimmt etwas nicht. Die Sache ist, dass die Bilder in den body hinzugefügt werden, sobald sie geladen sind. Das heißt, niemand garantiert uns, dass die Bilder genau in der Reihenfolge hinzugefügt werden, die wir benötigen.

Es gibt noch etwas anderes. Angenommen, wir möchten etwas tun, wenn alle drei Bilder geladen sind. In unserem Code können wir diesen Moment einfach nicht erfassen, da alle drei Bilder unabhängig voneinander geladen werden.

Okay, ändern wir den Code:

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('alle Bilder wurden geladen');
		});
	});
});

Wir haben beide beschriebenen Probleme gelöst. Jedoch haben wir im Austausch ein anderes bekommen. Es ist noch nicht stark sichtbar, aber stellen Sie sich vor, wie unser Code aussehen würde, wenn wir nicht drei, sondern, sagen wir, zehn Bilder laden müssten, plus Ausnahmebehandlung. Als Ergebnis würde der Code extrem unlesbar werden: die Komplexität des Codes wächst lawinenartig bei der Verschachtelung von Callbacks. Eine solche Situation wird callback hell genannt - die Hölle der Callbacks.

Schreiben Sie den angegebenen Code so um, dass er 10 Bilder lädt plus Ausnahmebehandlung. Stellen Sie sicher, dass Sie eine Callback-Hell-Situation erhalten.