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 загружен');
});

Уни промисификация қилинг.