Asünkroonse koodi promisifikatsioon JavaScriptis

Kuna promissid ilmusid JavaScripti mitte nii kaua aega tagasi, siis mõned asünkroonsed funktsionaalsused ei pruugi toetada promisse. Sel juhul on kasulik luua sellise koodi ümber kest promissina, kuna promissidega töötamine on palju mugavam. Sellist teisendust nimetatakse promisifikatsiooniks.

Näiteks funktsionaalsus, mis ei toeta promisse, võib olla piltide laadimine, mida me oleme juba läbi vaadanud eelmistes õppetundides:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('pildi laadimise viga');
});

Teeme selle koodi promisifikatsiooni, mähides selle funktsiooni, mis tagastab promissi:

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('pildi "' + path + '" laadimise viga'));
		});
	});
}

Me saame oma funktsiooni kasutada järgneval viisil:

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

Ise, minu koodi peale vahtimata, tehke piltide laadimise promisifikatsioon. Testige saadud koodi.

Olgu piltide teed massiivis:

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

Kirjutage kood, mis ootab kõikide piltide laadimise lõppu ning seejärel lisab need tsüklis body lõppu.

Antud on järgnev kood:

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

Tehke selle promisifikatsioon.