Aszinkron kód promisifikációja JavaScriptben

Mivel a promise-ok nem olyan régóta vannak a JavaScriptben, néhány aszinkron funkcionalitás nem támogathatja a promise-okat. Ebben az esetben hasznos egy promise-burkolatot létrehozni az ilyen kód körül, mivel a promise-okkal sokkal kényelmesebb dolgozni. Ezt az átalakítást promisifikációnak nevezzük.

A promise-okat nem támogató funkcionalitás például lehet a képek betöltése, amit már megvizsgáltunk az előző leckékben:

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

Végezzük el ennek a kódnak a promisifikációját, egy olyan függvénybe csomagolva, amely egy promise-ot ad vissza:

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

A függvényünket a következő módon tudjuk majd használni:

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

Önállóan, be nem kukucskálva a kódomba, végezd el a képek betöltésének promisifikációját. Teszteld a kapott kódot.

Tegyük fel, hogy a képek elérési útjai egy tömbben tárolódnak:

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

Írj olyan kódot, amely megvárja az összes kép betöltésének befejeződését, majd egy ciklusban hozzáadja őket a body végéhez.

Adott a következő kód:

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

Végezd el a promisifikációját.