Callback hell-problemet i JavaScript

La oss si at vi ønsker å laste ned tre bilder ved hjelp av funksjonen loadImage:

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

Det er noe galt med denne koden. Saken er at bildene vil bli lagt til i body ettersom de lastes ned. Det betyr at ingen garanterer oss at bildene vil bli lagt til nettopp i den rekkefølgen vi trenger.

Det er noe mer. La oss si at vi ønsker å gjøre noe når alle tre bildene er lastet ned. I koden vår vil vi rett og slett ikke kunne fange dette øyeblikket, fordi alle tre bildene lastes ned uavhengig.

Ok, la oss omskrive koden:

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 er lastet ned');
		});
	});
});

Vi løste begge de beskrevne problemene. Imidlertid fikk vi et annet problem i bytte. Foreløpig er det ikke sterkt synlig, men se for deg hvordan koden vår vil se ut hvis den ikke inneholder lasting av tre, men for eksempel ti bilder, pluss at unntakshåndtering er lagt til. Som et resultat vil koden bli ekstremt vanskelig å lese: kodekompleksiteten øker i et skred ved innkapsling av callbacks inni hverandre. En slik situasjon kalles callback hell - callback helvete.

Omskriv den gitte koden slik at den inneholder lasting av 10 bilder pluss unntakshåndtering. Forsikre deg om at du ender opp med en callback hell-situasjon.