Promisificering af asynkron kode i JavaScript

Da promises ikke har været i JavaScript så længe, kan visse asynkrone funktioner ikke understøtte promises. I dette tilfælde er det nyttigt at skabe en wrapper omkring sådan kode i form af et promise, da det er meget mere bekvemt at bruge promises. Sådan en transformation kaldes promisificering.

Et eksempel på en funktion, der ikke understøtter promises, kan være indlæsning af billeder, som vi allerede har gennemgået i tidligere lektioner:

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

Lad os udføre promisificering af denne kode ved at indpakke den i en funktion, der returnerer et 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('image "' + path + '"  load error'));
		});
	});
}

Vi vil kunne bruge vores funktion på følgende måde:

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

Udfør selv, uden at kigge på min kode, promisificering af billedindlæsning. Test den resulterende kode.

Antag at stierne til billederne er gemt i et array:

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

Skriv kode, der venter på indlæsningen af alle billeder er afsluttet, og derefter tilføjer dem i en løkke til slutningen af body.

Følgende kode er givet:

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

Udfør dens promisificering.