Asünkroonse koodi promisifikatsioon JavaScriptis

Kuna promissid ilmusid JavaScripti mitte nii kaua aega tagasi, siis mõned asünkroonsed funktsionaalsused ei pruugi toetada promisse. Sel juhul on kasulik luua sellise koodi ümber kest promissina, kuna promissidega töötamine on palju mugavam. Sellist teisendust nimetatakse promisifikatsiooniks.

Näiteks funktsionaalsus, mis ei toeta promisse, võib olla piltide laadimine, mida me oleme juba läbi vaadanud eelmistes õppetundides:

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

image.addEventListener('load', function() {
  document.body.appendChild(image);
});
image.addEventListener('error', function() {
  console.log('pildi laadimise viga');
});

Teeme selle koodi promisifikatsiooni, mähides selle funktsiooni, mis tagastab promissi:

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('pildi "' + path + '" laadimise viga'));
    });
  });
}

Me saame oma funktsiooni kasutada järgneval viisil:

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