Promisification du code asynchrone en JavaScript

Comme les promesses sont apparues en JavaScript il n'y a pas si longtemps, certaines fonctionnalités asynchrones peuvent ne pas les supporter. Dans ce cas, il est utile de créer une enveloppe autour d'un tel code sous forme de promesse, car il est beaucoup plus pratique d'utiliser les promesses. Une telle transformation est appelée promisification.

Un exemple de fonctionnalité qui ne supporte pas les promesses peut être le chargement d'images, que nous avons déjà examiné dans les leçons précédentes :

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

Effectuons la promisification de ce code, en l'enveloppant dans une fonction renvoyant une promesse :

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

Nous pourrons utiliser notre fonction de la manière suivante :

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

Indépendamment, sans regarder mon code, effectuez la promisification du chargement d'images. Testez le code obtenu.

Supposons que les chemins vers les images soient stockés dans un tableau :

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

Écrivez un code qui attendra la fin du chargement de toutes les images, puis les ajoutera dans une boucle à la fin du body.

Voici le code suivant :

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

Effectuez sa promisification.