Promisifisering av asynkron kode i JavaScript

Siden promiser dukket opp i JavaScript ikke så lenge siden, kan noe asynkron funksjonalitet ikke støtte promiser. I dette tilfellet er det nyttig å lage et dekke rundt slik kode i form av et promise, fordi det er mye mer praktisk å bruke promiser. En slik transformasjon kalles promisifisering.

Et eksempel på funksjonalitet som ikke støtter promiser, kan være lasting av bilder, som vi allerede har diskutert i tidligere leksjoner:

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

La oss utføre promisifisering av denne koden, ved å pakke den inn i en funksjon som 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 bruke funksjonen vår på følgende måte:

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

Selvstendig, uten å kikke på koden min, utfør promisifisering av bildelasting. Test den resulterende koden.

La stiene til bildene lagres i en array:

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

Skriv kode som venter til alle bilder er ferdig lastet, og deretter legger dem til i en løkke på slutten av body.

Følgende kode er gitt:

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

Utfør dens promisifisering.