Promisificación de código asíncrono en JavaScript

Dado que las promesas aparecieron en JavaScript no hace mucho tiempo, alguna funcionalidad asíncrona puede no soportar promesas. En este caso es útil crear una envoltura sobre dicho código en forma de promesa, ya que usar promesas es mucho más conveniente. Esta transformación se llama promisificación.

Un ejemplo de funcionalidad que no soporta promesas puede ser la carga de imágenes, que ya analizamos en lecciones anteriores:

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

Realicemos la promisificación de este código, envolviéndolo en una función que retorne una promesa:

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

Podremos utilizar nuestra función de la siguiente manera:

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

Independientemente, sin mirar mi código, realice la promisificación de la carga de imágenes. Pruebe el código obtenido.

Supongamos que las rutas de las imágenes se almacenan en un array:

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

Escriba el código que espere a que termine la carga de todas las imágenes, y luego las agregue en un ciclo al final del body.

Dado el siguiente código:

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

Realice su promisificación.