Επαγγελματοποίηση ασύγχρονου κώδικα σε JavaScript

Δεδομένου ότι οι υποσχέσεις εμφανίστηκαν στο JavaScript όχι πολύ καιρό πριν, ορισμένες ασύγχρονες λειτουργίες μπορεί να μην υποστηρίζουν υποσχέσεις. Σε αυτήν την περίπτωση είναι χρήσιμο να δημιουργήσετε ένα κέλυφος γύρω από αυτόν τον κώδικα με τη μορφή μιας υποσχέσης, καθώς η χρήση υποσχέσεων είναι πολύ πιο βολική. Αυτός ο μετασχηματισμός ονομάζεται επαγγελματοποίηση.

Ένα παράδειγμα λειτουργίας που δεν υποστηρίζει υποσχέσεις μπορεί να είναι η φόρτωση εικόνων, που έχουμε ήδη αναλύσει σε προηγούμενα μαθήματα:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('σφάλμα φόρτωσης εικόνας');
});

Ας εκτελέσουμε την επαγγελματοποίηση αυτού του κώδικα, τυλίγοντάς τον σε μια συνάρτηση που επιστρέφει μια υπόσχεση:

function loadImage(path) {
	return new Promise(function(resolve, reject) {
		let image = document.createElement('img');
		image.src = path;
		
		image.addEventListener('load', function() {
			resolve(image);
		});
		image.addEventListener('error', function() {
			reject(new Error('σφάλμα φόρτωσης εικόνας "' + path + '"'));
		});
	});
}

Θα μπορέσουμε να χρησιμοποιήσουμε τη συνάρτησή μας ως εξής:

loadImage('img.png').then(function(image) {
	document.body.appendChild(image);
}).catch(function(error) {
	console.log(error);
});

Ανεξάρτητα, χωρίς να κοιτάτε τον κώδικά μου, εκτελέστε επαγγελματοποίηση της φόρτωσης εικόνων. Δοκιμάστε τον κώδικα που προκύπτει.

Αφήστε τις διαδρομές προς τις εικόνες να αποθηκεύονται σε έναν πίνακα:

let paths = ['img1.png', 'img2.png', 'img3.png'];

Γράψτε κώδικα που θα περιμένει να ολοκληρωθεί η φόρτωση όλων των εικόνων και στη συνέχεια θα τις προσθέσει σε έναν βρόχο στο τέλος του body.

Δίνεται ο ακόλουθος κώδικας:

window.addEventListener('DOMContentLoaded', function() {
	console.log('το dom φορτώθηκε');
});

Εκτελέστε την επαγγελματοποίησή του.