Επαγγελματοποίηση ασύγχρονου κώδικα σε JavaScript

Δεδομένου ότι οι υποσχέσεις εμφανίστηκαν στο JavaScript όχι πολύ καιρό πριν, ορισμένες ασύγχρονες λειτουργίες μπορεί να μην υποστηρίζουν υποσχέσεις. Σε αυτήν την περίπτωση είναι χρήσιμο να δημιουργήσετε ένα κέλυφος γύρω από αυτόν τον κώδικα με τη μορφή μιας υποσχέσης, καθώς η χρήση υποσχέσεων είναι πολύ πιο βολική. Αυτός ο μετασχηματισμός ονομάζεται επαγγελματοποίηση.

Ένα παράδειγμα λειτουργίας που δεν υποστηρίζει υποσχέσεις μπορεί να είναι η φόρτωση εικόνων, που έχουμε ήδη αναλύσει σε προηγούμενα μαθήματα:

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

image.addEventListener('load', function() {
  document.body.appendChild(image);
});
image.addEventListener('error', function() {
  console.log('σφάλμα φόρτωσης εικόνας');
});

Ας εκτελέσουμε την επαγγελματοποίηση αυτού του κώδικα, τυλίγοντάς τον σε μια συνάρτηση που επιστρέφει μια υπόσχεση:

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('σφάλμα φόρτωσης εικόνας "' + path + '"'));
    });
  });
}

Θα μπορέσουμε να χρησιμοποιήσουμε τη συνάρτησή μας ως εξής:

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 φορτώθηκε');
});