Die callback hell probleem in JavaScript

Kom ons sê ons wil drie beelde laai met behulp van die funksie 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);
});

Daar is iets verkeerd met hierdie kode. Die ding is, dat die beelde in die body sal verskyn soos hulle gelaai word. Dit beteken niemand kan vir ons waarborg dat die beelde in die presiese volgorde bygevoeg sal word wat ons nodig het nie.

Daar is nog iets. Kom ons sê ons wil iets doen wanneer al drie beelde gelaai is. In ons kode kan ons eenvoudig nie hierdie oomblik vasvang nie, aangesien al drie beelde onafhanklik gelaai word.

Okay, laat ons die kode oorskryf:

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 beelde is gelaai');
		});
	});
});

Ons het albei beskryfde probleme opgelos. Tog, het ons 'n ander probleem in ruil daarvoor gekry. Dit is nog nie sterk sigbaar nie, maar stel jou voor hoe ons kode sal lyk as dit nie drie beelde laai nie, maar, sê, tien, en foutafhandeling bygevoeg word. As gevolg sal die kode uiters onleesbaar word: die kompleksiteit van die kode groei lawine-agtig met die nest van terugbelprente. Hierdie situasie word callback hell genoem - die hel van terugbelprente.

Herskryf die gegewe kode sodat dit 10 beelde laai plus die hantering van uitsonderings. Maak seker dat jy die callback hell situasie kry.