Promisifikasie van Asinchrone Kode in JavaScript

Aangesien beloftes (promises) nie so lank gelede in JavaScript verskyn het nie, kan sommige asinchrone funksionaliteit nie beloftes ondersteun nie. In hierdie geval is dit nuttig om 'n omhulsel in die vorm van 'n belofte oor sodanige kode te skep, aangesien dit baie geriefliker is om beloftes te gebruik. So 'n transformasie word promisifikasie genoem.

'n Voorbeeld van funksionaliteit wat nie beloftes ondersteun nie, kan die laai van prente wees, wat ons reeds in vorige lesse behandel het:

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

Kom ons voer promisifikasie van hierdie kode uit deur dit in 'n funksie wat 'n belofte teruggee, te verpak:

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

Ons sal ons funksie op die volgende manier kan gebruik:

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

Voer self, sonder om na my kode te kyk, promisifikasie van die laai van prente uit. Toets die verkrygde kode.

Laat die paaie na die prente in 'n array gestoor wees:

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

Skryf kode wat sal wag totdat alle prente gelaai is, en dan sal dit hulle in 'n lus aan die einde van die body voeg.

Die volgende kode word gegee:

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

Voer promisifikasie daarvan uit.