Asynkronisen koodin promisifiointi JavaScriptissä

Koska promiset eivät ole olleet JavaScriptissä kovin kauan, jotkut asynkroniset toiminnot eivät välttämättä tue promiseja. Tällöin on hyödyllistä luoda kyseiselle koodille promise-kääre, sillä promiseilla on paljon mukavampaa käyttää. Tällaista muunnosta kutsutaan promisifioinniksi.

Esimerkkinä toiminnosta, joka ei tue promiseja, voi olla kuvien lataus, jota olemme jo käsitelleet aikaisemmissa oppitunneissa:

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

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

Suoritetaan tämän koodin promisifiointi käärimällä se funktioon, joka palauttaa promisen:

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

Voimme käyttää funktiotamme seuraavalla tavalla:

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

Suorita itsenäisesti, katsomatta koodiini, kuvien latauksen promisifiointi. Testaa saatua koodia.

Oletetaan, että kuvien polut tallennetaan taulukkoon:

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

Kirjoita koodi, joka odottaa kaikkien kuvien latautumisen loppumista ja sitten lisää ne silmukassa bodyn loppuun.

Annettu seuraava koodi:

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

Suorita sen promisifiointi.