Promisifizierung von asynchronem Code in JavaScript

Da Promises in JavaScript noch nicht so lange existieren, unterstützt mancher asynchroner Funktionalität keine Promises. In diesem Fall ist es nützlich, eine Hülle in Form eines Promises um diesen Code zu erstellen, da die Verwendung von Promises viel bequemer ist. Eine solche Umwandlung wird Promisifizierung genannt.

Ein Beispiel für eine Funktionalität, die keine Promises unterstützt, könnte das Laden von Bildern sein, das wir bereits in vorherigen Lektionen besprochen haben:

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

Lassen Sie uns diesen Code promisifizieren, indem wir ihn in eine Funktion einwickeln, die ein Promise zurückgibt:

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

Wir werden unsere Funktion wie folgt verwenden können:

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

Führen Sie unabhängig, ohne in meinen Code zu schauen, die Promisifizierung des Bildladens durch. Testen Sie den erhaltenen Code.

Angenommen, die Pfade zu den Bildern sind in einem Array gespeichert:

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

Schreiben Sie Code, der wartet, bis das Laden aller Bilder abgeschlossen ist, und sie dann in einer Schleife an das Ende des body anhängt.

Gegeben ist der folgende Code:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom загружен');
});

Führen Sie dessen Promisifizierung durch.