Promisifikace asynchronního kódu v JavaScriptu

Protože promise se v JavaScriptu objevily nedávno, některé asynchronní funkce mohou promise nepodporovat. V tomto případě je užitečné vytvořit nad takovým kódem obal ve formě promise, protože používání promise je mnohem pohodlnější. Taková transformace se nazývá promisifikace.

Příkladem funkce, která nepodporuje promise, může být načítání obrázků, které jsme již rozebírali v předchozích lekcí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');
});

Proveďme promisifikaci tohoto kódu, obálkou jej do funkce, která vrací 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'));
		});
	});
}

Naši funkci budeme moci použít následujícím způsobem:

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

Samostatně, bez nahlížení do mého kódu, proveďte promisifikaci načítání obrázků. Otestujte získaný kód.

Nechť cesty k obrázkům jsou uloženy v poli:

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

Napište kód, který počká na dokončení načtení všech obrázků, a poté je v cyklu přidá na konec body.

Je dán následující kód:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom załadowany');
});

Proveďte jeho promisifikaci.