O problema do callback hell em JavaScript

Suponha que queiramos carregar três imagens usando a função 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);
});

Há algo de errado com este código. O problema é que as imagens serão adicionadas ao body à medida que forem carregadas. Ou seja, ninguém garante que as imagens serão adicionadas exatamente na ordem que desejamos.

Há mais uma coisa. Suponha que queiramos fazer algo quando todas as três imagens estiverem carregadas. Em nosso código, simplesmente não conseguiremos detectar esse momento, pois todas as três imagens são carregadas independentemente.

Ok, vamos refatorar o código:

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('todas as imagens foram carregadas');
		});
	});
});

Resolvemos os dois problemas descritos. No entanto, ganhamos outro em troca. Ele ainda não é muito visível, mas imagine como ficará nosso código se houver o carregamento não de três, mas, digamos, dez imagens, além de ser adicionado o tratamento de exceções. Como resultado, o código se tornará extremamente ilegível: a complexidade do código cresce de forma avalanche com o aninhamento de callbacks. Essa situação é chamada de callback hell - inferno de callbacks.

Reescreva o código fornecido para que ele carregue 10 imagens mais o tratamento de exceções. Certifique-se de que você obtém a situação de callback hell.