Promisificarea codului asincron în JavaScript

Deoarece promisiunile au apărut în JavaScript nu cu mult timp în urmă, unele funcționalități asincrone pot să nu suporte promisiunile. În acest caz este util să creăm o înveliș peste acest cod sub forma unei promisiuni, deoarece utilizarea promisiunilor este mult mai convenabilă. O astfel de transformare se numește promisificare.

Un exemplu de funcționalitate care nu suportă promisiuni poate fi încărcarea imaginilor, pe care am analizat-o deja în lecțiile anterioare:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('eroare la încărcarea imaginii');
});

Să realizăm promisificarea acestui cod, împachetându-l într-o funcție care returnează o promisiune:

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('eroare la încărcarea imaginii "' + path + '"'));
		});
	});
}

Vom putea folosi funcția noastră în modul următor:

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

Independent, fără a privi în codul meu, realizați promisificarea încărcării imaginilor. Testați codul obținut.

Să presupunem că căile către imagini sunt stocate într-un array:

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

Scrieți cod care va aștepta finalizarea încărcării tuturor imaginilor, apoi le va adăuga într-un ciclu la sfârșitul body.

Este dat următorul cod:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom-ul este încărcat');
});

Realizați promisificarea lui.