Promisificazione del codice asincrono in JavaScript

Poiché le Promise sono state introdotte in JavaScript non così tanto tempo fa, alcune funzionalità asincrone potrebbero non supportarle. In questo caso è utile creare un wrapper attorno a tale codice sotto forma di Promise, poiché utilizzare le Promise è molto più conveniente. Questa trasformazione è chiamata promisificazione.

Un esempio di funzionalità che non supporta le Promise può essere il caricamento di immagini, che abbiamo già analizzato nelle lezioni precedenti:

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

Eseguiamo la promisificazione di questo codice, incapsulandolo in una funzione che restituisce una promise:

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

Potremo utilizzare la nostra funzione nel seguente modo:

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

In modo autonomo, senza guardare il mio codice, esegui la promisificazione del caricamento delle immagini. Testa il codice ottenuto.

Sia dato un array contenente i percorsi delle immagini:

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

Scrivi il codice che attenderà il termine del caricamento di tutte le immagini, per poi aggiungerle in un ciclo alla fine del body.

Dato il seguente codice:

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

Eseguine la promisificazione.