Промисфикация на асинхронен код в 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 загружен');
});

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