Promisifikacija asinhronog koda u JavaScript-u

Pošto su promisi u JavaScript-u pojavili ne tako davno, neke asinhrone funkcije mogu ne podržavati promise. U ovom slučaju korisno je kreirati omotač oko takvog koda u vidu promisa, jer je korišćenje promisa mnogo praktičnije. Takva transformacija se naziva promisifikacija.

Primer funkcionalnosti koji ne podržava promise može biti učitavanje slika, koje smo već razmatrali u prethodnim lekcijama:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('Greška pri učitavanju slike');
});

Hajde da izvršimo promisifikaciju ovog koda, obavivši ga funkcijom koja vraća promis:

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('Greška pri učitavanju slike "' + path + '"'));
		});
	});
}

Moći ćemo da upotrebimo našu funkciju na sledeći način:

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

Samostalno, ne gledajući u moj kod, izvršite promisifikaciju učitavanja slika. Testirajte dobijeni kod.

Neka se putanje do slika čuvaju u nizu:

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

Napišite kod koji će sačekati da se završi učitavanje svih slika, a zatim ih u ciklusu dodati na kraj body-ja.

Dat je sledeći kod:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom je učitan');
});

Izvršite njegovu promisifikaciju.