Promisifikasi Kode Asinkron di JavaScript

Karena promise muncul di JavaScript belum lama ini, beberapa fungsionalitas asinkron mungkin tidak mendukung promise. Dalam kasus ini, berguna untuk membuat pembungkus di atas kode tersebut dalam bentuk promise, karena menggunakan promise jauh lebih nyaman. Transformasi seperti ini disebut promisifikasi.

Contoh fungsionalitas yang tidak mendukung promise dapat berupa pemuatan gambar, yang telah kita bahas dalam pelajaran sebelumnya:

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

Mari lakukan promisifikasi kode ini, dengan membungkusnya dalam fungsi yang mengembalikan 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'));
		});
	});
}

Kita akan dapat menggunakan fungsi kita sebagai berikut:

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

Secara mandiri, tanpa melihat kode saya, lakukan promisifikasi pemuatan gambar. Uji kode yang diperoleh.

Misalkan path gambar disimpan dalam array:

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

Tulis kode yang akan menunggu hingga semua gambar selesai dimuat, lalu menambahkannya dalam loop ke akhir body.

Diberikan kode berikut:

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

Lakukan promisifikasinya.