JavaScriptтеги асинхрондук кодду промисификациялоо

Промисстер JavaScriptте жаңы эле пайда болгондуктан, кээ бир асинхрондук функционал промисстерди колдобой калышы мүмкүн. Бул учурда мындай коддун үстүнө промис каптагычты түзүү пайдалуу, анткени промисстерди колдонуу андай ыңгайлуу. Мындай өзгөртүү промисификация деп аталат.

Промисстерди колдобогон функционалдын мисалы катары, биз мурунку сабактарда карап чыккан сүрөттөрдү жүктөө кызматын келтире алабыз:

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

Келгиле, бул кодду промис кайтара турган функцияга ороп, аны промисификациялайлы:

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

Биз өз функциябызды төмөнкүдөй колдоно алабыз:

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

Өз алдынча, менин кодумга карабастан, сүрөттөрдү жүктөөнү промисификациялаңыз. Алынган кодду сынап көрүңүз.

Сүрөттөргө барып жетүү жолдору массивде сакталсын:

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

Бардык сүрөттөр жүктөлүп бүткөндөн кийин күтүп, анан аларды цикл менен bodyтин аягына кошкон кодду жазыңыз.

Төмөнкү код берилген:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom загружен');
});

Аны промисификациялаңыз.