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

Выполните его промисификацию.