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:

javascriptlet 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:

javascriptfunction 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:

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

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

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