Promisificering af asynkron kode i JavaScript

Da promises ikke har været i JavaScript så længe, kan visse asynkrone funktioner ikke understøtte promises. I dette tilfælde er det nyttigt at skabe en wrapper omkring sådan kode i form af et promise, da det er meget mere bekvemt at bruge promises. Sådan en transformation kaldes promisificering.

Et eksempel på en funktion, der ikke understøtter promises, kan være indlæsning af billeder, som vi allerede har gennemgået i tidligere lektioner:

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

Lad os udføre promisificering af denne kode ved at indpakke den i en funktion, der returnerer et 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('image "' + path + '"  load error'));
    });
  });
}

Vi vil kunne bruge vores funktion på følgende måde:

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