Πώς εργάζεστε με ασύγχρονο JavaScript;

Εργάζομαι με ασυγχρονία στην JavaScript χρησιμοποιώντας callbacks, promises και async/await.

Τα callbacks είναι συναρτήσεις που περνιούνται σε άλλες συναρτήσεις ως ορίσματα και εκτελούνται μετά την ολοκλήρωση μιας λειτουργίας. Μπορούν να οδηγήσουν σε "κόλαση των callbacks" όταν είναι εμφωλευμένα.

// Παράδειγμα callback
function fetchData(callback) {
  setTimeout(() => {
    callback("Δεδομένα λήφθηκαν");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Θα εμφανίσει "Δεδομένα λήφθηκαν" μετά από 1 δευτερόλεπτο
});

Οι promises είναι αντικείμενα που αντιπροσωπεύουν την τελική ολοκλήρωση ή αποτυχία μιας ασύγχρονης λειτουργίας. Διευκολύνουν τη δουλειά με ασύγχρονο κώδικα, αποφεύγοντας βαθιά εμφωλευμένα. Έχουν τρεις καταστάσεις: pending (σε αναμονή), fulfilled (ολοκληρώθηκε), rejected (απορρίφθηκε).

// Παράδειγμα promise
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Δεδομένα λήφθηκαν");
    }, 1000);
  });
}

fetchDataPromise()
  .then((data) => {
    console.log(data); // Θα εμφανίσει "Δεδομένα λήφθηκαν" μετά από 1 δευτερόλεπτο
  })
  .catch((error) => {
    console.error("Σφάλμα:", error);
  });

Το async/await είναι ζάχαρη σύνταξης πάνω από promises που καθιστά τον ασύγχρονο κώδικα πιο ευανάγνωστο, παρόμοιο με τον συγχρονικό. Μια συνάρτηση που σημειώνεται με async επιστρέφει πάντα promise. Ο τελεστής await μπορεί να χρησιμοποιηθεί μόνο μέσα σε async συναρτήσεις και αναστέλλει την εκτέλεση μέχρι το promise να ολοκληρωθεί ή να απορριφθεί.

// Παράδειγμα async/await
async function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Δεδομένα λήφθηκαν");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Θα εμφανίσει "Δεδομένα λήφθηκαν" μετά από 1 δευτερόλεπτο
  } catch (error) {
    console.error("Σφάλμα:", error);
  }
}

processData();

Συχνά χρησιμοποιώ async/await όταν δουλεύω με API αιτήματα, καθώς είναι ο πιο βολικός και ευανάγνωστος τρόπος διαχείρισης ασύγχρονων λειτουργιών. Για παράλληλη εκτέλεση πολλαπλών ασύγχρονων λειτουργιών, χρησιμοποιώ Promise.all() ή Promise.allSettled().

Χρησιμοποιώ το event loop για να κατανοήσω τη σειρά εκτέλεσης του ασύγχρονου κώδικα, microtasks και macrotasks.