Asinhronā koda promisifikācija JavaScript

Tā kā promise JavaScript parādījās nesen, dažas asinhronās funkcijas var neatbalstīt promise. Šajā gadījumā ir noderīgi izveidot ap šādu kodu apvalku promise formā, jo lietot promise ir daudz ērtāk. Šādu pārveidi sauk par promisifikāciju.

Funkcionalitātes piemērs, kas neatbalsta promise, varētu būt attēlu ielāde, ko mēs jau apskatījām iepriekšējās nodarbībās:

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

Veiksim šī koda promisifikāciju, aptinot to funkcijā, kas atgriež 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'));
		});
	});
}

Mēs varēsim izmantot mūsu funkciju šādi:

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

Patstāvīgi, neieskatoties manā kodā, veiciet attēlu ielādes promisifikāciju. Testējiet iegūto kodu.

Lai attēlu ceļi glabājas masīvā:

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

Uzrakstiet kodu, kas gaidīs visu attēlu ielādes pabeigšanu un pēc tam pievienos tos ciklā body beigās.

Dots šāds kods:

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

Veiciet tā promisifikāciju.