Pempromisan Kod Asinkron dalam JavaScript

Memandangkan janji (promise) muncul dalam JavaScript tidak lama dahulu, beberapa fungsi asinkron mungkin tidak menyokong janji. Dalam kes ini, adalah berguna untuk membuat pembungkus di sekitar kod tersebut dalam bentuk janji, kerana menggunakan janji adalah lebih mudah. Transformasi sedemikian dipanggil pempromisan.

Contoh fungsi yang tidak menyokong janji ialah memuat imej, yang telah kita bincangkan 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('ralat muat imej');
});

Mari lakukan pempromisan kod ini, dengan membungkusnya dalam fungsi yang mengembalikan janji:

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('ralat muat imej "' + path + '"'));
		});
	});
}

Kita boleh menggunakan fungsi kami seperti berikut:

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

Secara berdikari, tanpa melihat kod saya, lakukan pempromisan memuat imej. Uji kod yang diperoleh.

Katakan laluan imej disimpan dalam array:

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

Tulis kod yang akan menunggu sehingga kesemua imej selesai dimuat, dan kemudian menambahkannya dalam gelung ke hujung body.

Diberi kod berikut:

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

Lakukan pempromisannya.