Promisifikacija asinhrone kode v JavaScript

Ker so promise v JavaScriptu pojavile relativno nedavno, nekateri asinhroni funkcionali morda ne podpirajo promise. V tem primeru je koristno ustvariti ovoj okoli takšne kode v obliki promise, saj je uporaba promise veliko bolj priročna. Taka preobrazba se imenuje promisifikacija.

Primer funkcionala, ki ne podpira promise, je lahko nalaganje slik, ki smo ga že obravnavali v prejšnjih lekcijah:

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

image.addEventListener('load', function() {
  document.body.appendChild(image);
});
image.addEventListener('error', function() {
  console.log('napaka pri nalaganju slike');
});

Izvedimo promisifikacijo te kode, tako da jo ovijemo v funkcijo, ki vrne 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('napaka pri nalaganju slike "' + path + '"'));
    });
  });
}

Našo funkcijo lahko uporabimo na naslednji način:

javascriptloadImage('img.png').then(function(image) {
  document.body.appendChild(image);
}).catch(function(error) {
  console.log(error);
});
Задание 1

Samostojno, brez gledanja v mojo kodo, izvedite promisifikacijo nalaganja slik. Preizkusite dobljeno kodo.

Задание 2

Naj bodo poti do slik shranjene v polju:

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

Napišite kodo, ki bo počakala na konček nalaganja vseh slik, nato pa jih v zanki doda na konec body-ja.

Задание 3

Podana je naslednja koda:

javascriptwindow.addEventListener('DOMContentLoaded', function() {
  console.log('dom naložen');
});

Izvedite njeno promisifikacijo.