Promisifikasie van Asinchrone Kode in JavaScript

Aangesien beloftes (promises) nie so lank gelede in JavaScript verskyn het nie, kan sommige asinchrone funksionaliteit nie beloftes ondersteun nie. In hierdie geval is dit nuttig om 'n omhulsel in die vorm van 'n belofte oor sodanige kode te skep, aangesien dit baie geriefliker is om beloftes te gebruik. So 'n transformasie word promisifikasie genoem.

'n Voorbeeld van funksionaliteit wat nie beloftes ondersteun nie, kan die laai van prente wees, wat ons reeds in vorige lesse behandel het:

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

Kom ons voer promisifikasie van hierdie kode uit deur dit in 'n funksie wat 'n belofte teruggee, te verpak:

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('image "' + path + '"  load error'));
    });
  });
}

Ons sal ons funksie op die volgende manier kan gebruik:

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