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:

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

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

Kita boleh menggunakan fungsi kami seperti berikut:

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