Promisifiering av asynkron kod i JavaScript

Eftersom promiser kom till JavaScript för inte så länge sedan, kan viss asynkron funktionalitet sakna stöd för promiser. I det här fallet är det användbart att skapa ett lager ovanpå denna kod i form av ett promise, eftersom det är mycket bekvämare att använda promiser. En sådan omvandling kallas promisifiering.

Ett exempel på funktionalitet som inte stöder promiser kan vara bildladdning, som vi redan har gått igenom i tidigare lektioner:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('bildladdningsfel');
});

Låt oss utföra promisifiering av denna kod, genom att lägga den i en funktion som returnerar ett promise:

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('bild "' + path + '" laddningsfel'));
		});
	});
}

Vi kommer att kunna använda vår funktion på följande sätt:

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

Utför promisifiering av bildladdning på egen hand, utan att kolla på min kod. Testa den resulterande koden.

Låt sökvägarna till bilderna lagras i en array:

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

Skriv kod som väntar på att alla bilder har laddats klart, och sedan lägger till dem i en loop i slutet av body.

Följande kod ges:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom laddad');
});

Utför dess promisifiering.