JavaScript-da asinxron kodni promislash

Promise-lar JavaScript-da nisbatan yaqinda paydo bo'lganligi sababli, ba'zi asinxron funksionallik promise-larni qo'llab-quvvatlamasligi mumkin. Bunday holatda, promise-lardan foydalanish ancha qulayroq bo'lgani uchun, bunday kod ustiga promise ko'rinishidagi qobiq yaratish foydali bo'ladi. Bunday o'zgartirish promislash deb ataladi.

Promise-larni qo'llab-quvvatlamaydigan funksionallik misoli sifatida, biz oldingi darslarda ko'rib chiqqan rasm yuklash misolini keltirishimiz mumkin:

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

Keling, ushbu kodni promislashtiramiz, uni promise qaytaradigan funksiya ichiga o'rab chiqamiz:

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

Biz o'zimizning funksiyamizdan quyidagicha foydalana olamiz:

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

Mustaqil ravishda, mening kodimga qaramay, rasm yuklashni promislashni bajaring. Olingan kodni sinab ko'ring.

Tasvirlar yo'llari massivda saqlansin:

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

Barcha tasvirlar yuklanishining tugashini kutib, so'ng ularni tsiklda body oxiriga qo'shadigan kod yozing.

Quyidagi kod berilgan:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom yuklandi');
});

Uni promislashni bajaring.