JavaScript-də Asinxron Kodun Promisləşdirilməsi

Promislər JavaScript-də çoxdan yaranmadığından, bəzi asinxron funksionallıq promisləri dəstəkləməyə bilər. Bu halda belə bir kodun üzərində promis kimi bir qabıq yaratmaq faydalıdır, çünki promislərdən istifadə etmək daha rahatdır. Bu cür çevrilmə promisləşdirmə adlanır.

Promisləri dəstəkləməyən funksionallığa nümunə olaraq, əvvəlki dərslərdə artıq baxdığımız şəkillərin yüklənməsini göstərmək olar:

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

Gəlin bu kodu, onu promis qaytaran bir funksiya ilə əhatə edərək promisləşdirək:

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 funksiyamızdan aşağıdakı kimi istifadə edə biləcəyik:

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

Müstəqil olaraq, mənim koduma göz atmadan, şəkillərin yüklənməsini promisləşdirin. Əldə edilmiş kodu test edin.

Tutaq ki, şəkillərin yolları massivdə saxlanılır:

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

Bütün şəkillərin yüklənməsinin bitməsini gözləyən və sonra onları tsikllə body-nin sonuna əlavə edən kodu yazın.

Aşağıdaki kod verilmişdir:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom yükləndi');
});

Onu promisləşdirin.