Vấn đề callback hell trong JavaScript

Giả sử chúng ta muốn sử dụng hàm loadImage để tải ba hình ảnh:

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

Có điều gì đó không ổn với code này. Vấn đề là, các hình ảnh sẽ được thêm vào body theo tiến độ tải của chúng. Có nghĩa là không ai đảm bảo cho chúng ta rằng các hình ảnh sẽ được thêm vào đúng theo thứ tự mà chúng ta mong muốn.

Còn một vấn đề nữa. Giả sử chúng ta muốn làm một việc gì đó khi cả ba hình ảnh đều đã được tải xong. Trong code của chúng ta, chúng ta đơn giản là không thể bắt được thời điểm này, bởi vì cả ba hình ảnh được tải độc lập với nhau.

Được rồi, hãy sửa lại 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('tất cả hình ảnh đã được tải');
		});
	});
});

Chúng ta đã giải quyết được cả hai vấn đề đã mô tả. Tuy nhiên, lại nhận về một vấn đề khác. Hiện tại nó chưa thực sự rõ ràng, nhưng hãy tưởng tượng xem code của chúng ta sẽ trông như thế nào nếu trong đó có việc tải không phải ba, mà là, chẳng hạn, mười hình ảnh, cộng thêm việc xử lý ngoại lệ. Kết quả là code sẽ trở nên cực kỳ khó đọc: độ phức tạp của code tăng lên theo cấp số nhân khi các callback lồng vào nhau. Tình huống như vậy được gọi là callback hell - địa ngục callback.

Hãy viết lại đoạn code đã cho sao cho trong đó có việc tải 10 hình ảnh cộng với việc xử lý ngoại lệ. Hãy tự mình thấy rằng bạn đang gặp phải tình huống callback hell.