Πώς να επιστρέψετε την απόκριση από μια ασύγχρονη κλήση σε JavaScript

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ:

Ο ασύγχρονος προγραμματισμός είναι ένα ουσιαστικό μέρος της JavaScript, αλλά μπορεί να είναι δύσκολο να χειριστεί κανείς την απόκριση από μια ασύγχρονη κλήση. Σε αυτό το σεμινάριο, θα εξετάσουμε τρεις διαφορετικές λύσεις που μπορούν να χρησιμοποιηθούν για τον χειρισμό της απόκρισης από μια ασύγχρονη κλήση σε JavaScript: Υποσχέσεις με async/αναμονή, Επιστροφές κλήσεων και Υποσχέσεις με then().

Υποσχέσεις με async/wait (ES2017+)

Το Promises with async/wait είναι η πιο πρόσφατη προσθήκη στη γλώσσα JavaScript που μας επιτρέπει να γράφουμε ασύγχρονο κώδικα σε σύγχρονο στυλ. Με τη βοήθεια των λέξεων-κλειδιών async και await, μπορούμε να γράψουμε ασύγχρονο κώδικα που είναι πιο ευανάγνωστος και κατανοητός.

Ακολουθεί ένα παράδειγμα του τρόπου χρήσης του Promises με async/wait για τη διαχείριση μιας ασύγχρονης κλήσης:

async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  return data;
}

getData().then(data => console.log(data));

Στο παραπάνω παράδειγμα, χρησιμοποιούμε το fetch API για να πραγματοποιήσουμε μια ασύγχρονη κλήση στον διακομιστή για να λάβουμε κάποια δεδομένα. Στη συνέχεια, χρησιμοποιούμε τη λέξη-κλειδί αναμονής για να περιμένουμε την απάντηση και να αναλύσουμε τα δεδομένα JSON. Τέλος, επιστρέφουμε τα δεδομένα από τη συνάρτηση και την καταγράφουμε στην κονσόλα.

Σημειώστε ότι η συνάρτηση έχει δηλωθεί ως ασύγχρονη και επιστρέφει πάντα μια υπόσχεση. Η λέξη-κλειδί αναμονής χρησιμοποιείται για την αναμονή για την επίλυση του Promise πριν συνεχίσετε με την επόμενη γραμμή κώδικα.

Επανακλήσεις

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

function getData(callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(JSON.parse(xhr.responseText));
    } else {
      callback(null);
    }
  };
  xhr.onerror = function() {
    callback(null);
  };
  xhr.send();
}

getData(function(data) {
  console.log(data);
});

Στο παραπάνω παράδειγμα, χρησιμοποιούμε το αντικείμενο XMLHttpRequest για να πραγματοποιήσουμε μια ασύγχρονη κλήση στον διακομιστή για να λάβουμε κάποια δεδομένα.

Στη συνέχεια, μεταβιβάζουμε μια συνάρτηση επιστροφής κλήσης ως όρισμα στη συνάρτηση getData(). Μόλις ολοκληρωθεί η ασύγχρονη κλήση, η συνάρτηση επανάκλησης εκτελείται με τα αναλυμένα δεδομένα JSON ως όρισμα.

Υποσχέσεις με then()

Το Promises with then() είναι ένας άλλος τρόπος χειρισμού του ασύγχρονου κώδικα σε JavaScript.

Το Promise είναι ένα αντικείμενο που αντιπροσωπεύει την ενδεχόμενη ολοκλήρωση (ή αποτυχία) μιας ασύγχρονης λειτουργίας και μας επιτρέπει να αλυσοδύνουμε πολλαπλές ασύγχρονες λειτουργίες μαζί. Ακολουθεί ένα παράδειγμα του τρόπου χρήσης του Promises με τη then() για να χειριστείτε μια ασύγχρονη κλήση:

function getData() {
  return new Promise(function(resolve, reject) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(Error(xhr.statusText));
      }
    };
    xhr.onerror = function() {
      reject(Error("Network Error"));
    };
    xhr.send();
  });
}

getData().then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.log(error);
});

Στο παραπάνω παράδειγμα, δημιουργούμε ένα νέο Promise που αναδιπλώνει την ασύγχρονη κλήση. Το Promise επιλύεται με τα αναλυμένα δεδομένα JSON, εάν η κλήση είναι επιτυχής ή απορρίπτεται με ένα μήνυμα σφάλματος εάν η κλήση αποτύχει.

Στη συνέχεια, χρησιμοποιούμε τη μέθοδο then() για να χειριστούμε το επιλυμένο Promise και τη μέθοδο catch() για να χειριστούμε το Promise που απορρίφθηκε. Με αυτόν τον τρόπο, μπορούμε να διασφαλίσουμε ότι ο κώδικάς μας εκτελείται σωστά ακόμα κι αν παρουσιαστεί σφάλμα κατά τη διάρκεια της ασύγχρονης κλήσης.

Η μέθοδος then() λαμβάνει μια συνάρτηση επανάκλησης που εκτελείται όταν επιλυθεί το Promise. Αυτή η συνάρτηση λαμβάνει την επιλυμένη τιμή ως όρισμα. Στο παράδειγμά μας, η επιλυμένη τιμή είναι τα αναλυμένα δεδομένα JSON. Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε αυτά τα δεδομένα στον κώδικά μας όπως απαιτείται.

Η μέθοδος catch() λαμβάνει μια συνάρτηση επανάκλησης που εκτελείται όταν απορρίπτεται το Promise. Αυτή η συνάρτηση λαμβάνει ως όρισμα το μήνυμα σφάλματος.

Στο παράδειγμά μας, το μήνυμα σφάλματος είναι μια συμβολοσειρά που περιγράφει το σφάλμα που παρουσιάστηκε κατά την ασύγχρονη κλήση.

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