Promisificatie van asynchrone code in JavaScript

Aangezien promises niet zo lang geleden in JavaScript zijn geïntroduceerd, ondersteunt sommige asynchrone functionaliteit mogelijk geen promises. In dat geval is het handig om een wrapper in de vorm van een promise over zo'n code te maken, omdat het veel gemakkelijker is om promises te gebruiken. Een dergelijke transformatie wordt promisificatie genoemd.

Een voorbeeld van functionaliteit die geen promises ondersteunt, kan het laden van afbeeldingen zijn, dat we al in eerdere lessen hebben behandeld:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('image load error');
});

Laten we deze code promisificeren door het in een functie te wikkelen die een promise retourneert:

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('image "' + path + '"  load error'));
		});
	});
}

We kunnen onze functie als volgt gebruiken:

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

Voer zelf, zonder in mijn code te spieken, promisificatie van het laden van afbeeldingen uit. Test de verkregen code.

Stel dat de paden naar de afbeeldingen in een array zijn opgeslagen:

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

Schrijf code die wacht tot alle afbeeldingen zijn geladen en ze vervolgens in een cyclus aan het einde van de body toevoegt.

Gegeven de volgende code:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom loaded');
});

Voer de promisificatie ervan uit.