JavaScript-da asinkron kody promisleşdirmek

Promisler JavaScript-da gowy garap biler ýaly döredilmedik, şonuň üçin käbir asinkron funksiýalar promisleri goldamaz. Bu ýagdaýda promisleri ulanmak has amatly bolany üçin, şeýle kody promis gabygy bilen örtmek peýdaly. Bu özgeriş promisleşdirme diýilýär.

Promisleri goldamaýan funksiýalara mysal hökmünde, öňki sapaklarda seredeniňiz ýaly, surat ýüklemek funksiýasyny getirip bileris:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('surat ýükleme säwligi');
});

Geliň, bu kody promis gaýtarýan funksiýa içine alyp, promisleşdireliň:

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('"' + path + '" suraty ýüklenjek bolanda säwlik ýüze çykdy'));
		});
	});
}

Biz öz funksiýamyzy şu ýaly ulanyp bileris:

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

Özbaşyna, meniň kodyma seretmezden, surat ýüklemegi promisleşdiriň. Alynan kody synaň.

Suratlaryň ýollary massiwde saklanýar diýeliň:

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

Ähli suratlaryň ýüklenip gutarançak gözlemegi, soňra bolsa olary body-niň ahyryna goşmagy aýlawda amala aşyrýan kody ýazyň.

Aşakdaky kod berlen:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom ýüklendi');
});

Ony promisleşdiriň.