Promisifikácia asynchrónneho kódu v JavaScripte

Keďže promisy sa v JavaScripte objavili nie tak dávno, niektoré asynchrónne funkcie môžu nepodporovať promisy. V tomto prípade je užitočné vytvoriť nad takýmto kódom obal v podobe promisu, pretože používanie promisov je oveľa pohodlnejšie. Takáto transformácia sa nazýva promisifikáciou.

Príkladom funkcie, ktorá nepodporuje promisy, môže byť načítanie obrázkov, ktoré sme už rozoberali v predchádzajúcich lekciách:

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

Vykonajme promisifikáciu tohto kódu, obalením ho do funkcie, ktorá vráti 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('image "' + path + '"  load error'));
		});
	});
}

Našu funkciu môžeme použiť nasledovným spôsobom:

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

Samostatne, bez nahliadnutia do môjho kódu, vykonajte promisifikáciu načítania obrázkov. Otestujte získaný kód.

Nech cesty k obrázkom sú uložené v poli:

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

Napíšte kód, ktorý počká na dokončenie načítania všetkých obrázkov a potom ich v cykle pridá na koniec body.

Daný je nasledujúci kód:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom zaťažený');
});

Vykonajte jeho promisifikáciu.