Asinchroninio JavaScript kodo promisifikacija

Kadangi promisai JavaScript atsirado ne taip seniai, kai kurios asinchroninės funkcijos gali nepalaikyti promisų. Tokiu atveju naudinga sukurti tokio kodo apvalkalą promiso pavidalu, nes naudotis promisais yra daug patogiau. Tokia transformacija vadinama promisifikacija.

Funkcionalumo, kuris nepalaiko promisų, pavyzdys gali būti paveikslėlių įkėlimas, kurį jau nagrinėjome ankstesnėse pamokose:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('paveikslėlio įkėlimo klaida');
});

Atlikime šio kodo promisifikaciją, apvynioję jį į funkciją, grąžinančią 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('paveikslėlio "' + path + '" įkėlimo klaida'));
		});
	});
}

Mes galėsime pasinaudoti mūsų funkcija taip:

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

Savarankiškai, nežiūrėdami į mano kodą, atlikite paveikslėlių įkėlimo promisifikaciją. Ištestuokite gautą kodą.

Tegul paveikslėlių keliai saugomi masyve:

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

Parašykite kodą, kuris palauks, kol visi paveikslėliai bus įkelti, o tada pridės juos cikle į body pabaigą.

Duotas toks kodas:

window.addEventListener('DOMContentLoaded', function() {
	console.log('domas įkeltas');
});

Atlikite jo promisifikaciją.