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

Կատարեք դրա պրոմիսիֆիկացիան: