ასინქრონული კოდის პრომისიფიკაცია 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 დატვირთულია');
});

შეასრულეთ მისი პრომისიფიკაცია.