Chuyển đổi mã không đồng bộ thành Promise trong JavaScript

Vì Promise mới xuất hiện trong JavaScript không lâu, nên một số chức năng không đồng bộ có thể không hỗ trợ Promise. Trong trường hợp này, việc tạo một lớp vỏ bọc dưới dạng Promise cho mã như vậy là hữu ích, vì sử dụng Promise thuận tiện hơn nhiều. Sự chuyển đổi như vậy được gọi là promisification (chuyển đổi thành Promise).

Một ví dụ về chức năng không hỗ trợ Promise có thể là tải hình ảnh, mà chúng ta đã phân tích trong các bài học trước:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('Lỗi tải hình ảnh');
});

Hãy thực hiện promisification cho mã này bằng cách bọc nó trong một hàm trả về một 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('Lỗi tải hình ảnh "' + path + '"'));
		});
	});
}

Chúng ta sẽ có thể sử dụng hàm của mình theo cách sau:

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

Tự mình, không nhìn vào mã của tôi, hãy thực hiện promisification cho việc tải hình ảnh. Kiểm tra thử mã thu được.

Giả sử các đường dẫn đến hình ảnh được lưu trữ trong một mảng:

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

Viết mã, mã này sẽ đợi cho đến khi tất cả hình ảnh được tải xong, sau đó thêm chúng bằng vòng lặp vào cuối body.

Cho mã sau:

window.addEventListener('DOMContentLoaded', function() {
	console.log('DOM đã được tải');
});

Thực hiện promisification cho nó.