Промисфикација на асинхронен код во 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('Грешка при вчитување на сликата');
});

Ајде да ја извршиме промисфикацијата на овој код, затворајќи го во функција која враќа промис:

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

Ќе можеме да ја користиме нашата функција на следниов начин:

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 е вчитан');
});

Извршете ја неговата промисфикација.