Promisyfikacja asynchronicznego kodu w JavaScript

Ponieważ obietnice pojawiły się w JavaScript nie tak dawno, to niektóre funkcjonalności asynchroniczne mogą nie obsługiwać obietnic. W tym przypadku przydatne jest stworzenie nad takim kodem powłoki w postaci obietnicy, ponieważ korzystanie z obietnic jest znacznie wygodniejsze. Takie przekształcenie nazywa się promisyfikacją.

Przykładem funkcjonalności, która nie obsługuje obietnic, może być ładowanie obrazków, które już omawialiśmy w poprzednich lekcjach:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('błąd ładowania obrazka');
});

Wykonajmy promisyfikację tego kodu, opakowując go w funkcję, która zwraca obietnicę:

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('błąd ładowania obrazka "' + path + '"'));
		});
	});
}

Będziemy mogli skorzystać z naszej funkcji w następujący sposób:

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

Samodzielnie, nie podglądając w mój kod, wykonaj promisyfikację ładowania obrazków. Przetestuj otrzymany kod.

Niech ścieżki do obrazków przechowywane są w tablicy:

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

Napisz kod, który poczeka na zakończenie ładowania wszystkich obrazków, a następnie doda je w pętli na koniec body.

Dany jest następujący kod:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom załadowany');
});

Wykonaj jego promisyfikację.