การแปลงโค้ดอะซิงโครนัสใน JavaScript เป็นพรอมิส

เนื่องจากพรอมิสเพิ่งจะปรากฏใน JavaScript ไม่นานมานี้ ฟังก์ชันการทำงานแบบอะซิงโครนัสบางอย่าง อาจไม่รองรับพรอมิส ในกรณีนี้ การสร้างเปลือกหุ้มสำหรับโค้ดดังกล่าว ในรูปแบบของพรอมิสจะมีประโยชน์ เพราะการใช้พรอมิสนั้นสะดวกกว่ามาก การแปลงแบบนี้เรียกว่า การแปลงเป็นพรอมิส (promisification)

ตัวอย่างของฟังก์ชันการทำงานที่ไม่รองรับ พรอมิส อาจเป็นการโหลดภาพ ซึ่งเราได้วิเคราะห์ไปแล้วในบทเรียนที่ผ่านมา:

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

ลองมาแปลงโค้ดนี้เป็นพรอมิสกัน โดยการห่อหุ้มมันไว้ในฟังก์ชันที่คืนค่าเป็นพรอมิส:

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

เราจะสามารถใช้ฟังก์ชันของเราได้ ดังต่อไปนี้:

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

ลองทำด้วยตัวเอง โดยไม่แอบดูโค้ดของฉัน ทำการแปลงการโหลดภาพเป็นพรอมิส และทดสอบโค้ดที่ได้

สมมติว่าเส้นทางไปยังรูปภาพถูกเก็บอยู่ในอาร์เรย์:

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

เขียนโค้ดที่รอจนกว่าการโหลดภาพทั้งหมด จะเสร็จสิ้น จากนั้นจึงเพิ่มรูปภาพเหล่านั้น ในลูปไปที่ส่วนท้ายของ body

กำหนดให้มีโค้ดต่อไปนี้:

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

จงแปลงโค้ดนี้เป็นพรอมิส