Tutorial Promise JavaScript: Επίλυση, απόρριψη και αλυσίδα σε JS και ES6

Οι υποσχέσεις είναι ένας από τους τρόπους με τους οποίους μπορούμε να αντιμετωπίσουμε ασύγχρονες λειτουργίες στο JavaScript. Πολλοί άνθρωποι δυσκολεύονται να καταλάβουν πώς λειτουργούν οι Υποσχέσεις, οπότε σε αυτήν την ανάρτηση θα προσπαθήσω να τους εξηγήσω όσο πιο απλά μπορώ.

Οι υποσχέσεις είναι ένα ευρύ θέμα, επομένως δεν μπορώ να αναφερθώ σε κάθε λεπτομέρεια σε αυτό το άρθρο. Ωστόσο, θα βρείτε μια συνολική εισαγωγή για το τι είναι οι υποσχέσεις, εξηγήσεις όρων όπως επίλυση, απόρριψη και αλυσοδεσία, καθώς και ένα παράδειγμα κώδικα για τη δημιουργία και τη χρήση υποσχέσεων.

Προαπαιτούμενο: Για να κατανοήσετε καλύτερα αυτό το άρθρο, ανατρέξτε στην άλλη μου ανάρτηση σχετικά με τις επιστροφές κλήσεων JavaScript.

Τι είναι μια υπόσχεση;

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

Μια υπόσχεση έχει 2 πιθανά αποτελέσματα: είτε θα τηρηθεί όταν έρθει η ώρα, είτε δεν θα.

Αυτό είναι επίσης το ίδιο για υποσχέσεις στο JavaScript. Όταν ορίζουμε μια υπόσχεση σε JavaScript, θα επιλυθεί όταν έρθει η ώρα ή θα απορριφθεί.

Υποσχέσεις σε JavaScript

Πρώτα απ 'όλα, μια υπόσχεση είναι ένα αντικείμενο. Υπάρχουν 3 καταστάσεις του αντικειμένου Promise:

  • Σε εκκρεμότητα: Αρχική κατάσταση, πριν πετύχει ή αποτύχει η υπόσχεση
  • Επιλύθηκε: Ολοκληρώθηκε υπόσχεση
  • Απορρίφθηκε: Αποτυχημένη υπόσχεση

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

Εάν καταφέρουμε να λάβουμε τις πληροφορίες από τον διακομιστή, η υπόσχεση θα επιλυθεί με επιτυχία. Αλλά αν δεν λάβουμε τις πληροφορίες, τότε η υπόσχεση θα είναι σε κατάσταση απόρριψης.

Επιπλέον, εάν υπάρχουν πολλά αιτήματα, τότε μετά την επίλυση της πρώτης υπόσχεσης (ή την απόρριψη), θα ξεκινήσει μια νέα διαδικασία στην οποία μπορούμε να την επισυνάψουμε απευθείας με μια μέθοδο που ονομάζεται αλυσίδα.

Αν προτιμάτε, μπορείτε επίσης να παρακολουθήσετε την παρακάτω έκδοση βίντεο:

Ποια είναι η διαφορά μεταξύ Callbacks και Promises;

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

Αυτό είναι ένα από τα μεγαλύτερα πλεονεκτήματα της χρήσης υποσχέσεων, αλλά γιατί;

Τι είναι η αλυσίδα;

Οι λειτουργίες επανάκλησης χρησιμοποιούνται μόνο για ασύγχρονες λειτουργίες σε JavaScript για πολλά χρόνια. Αλλά σε ορισμένες περιπτώσεις, η χρήση υποσχέσεων μπορεί να είναι μια καλύτερη επιλογή.

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

firstRequest(function(response) { secondRequest(response, function(nextResponse) { thirdRequest(nextResponse, function(finalResponse) { console.log('Final response: ' + finalResponse); }, failureCallback); }, failureCallback); }, failureCallback);

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

firstRequest() .then(function(response) { return secondRequest(response); }).then(function(nextResponse) { return thirdRequest(nextResponse); }).then(function(finalResponse) { console.log('Final response: ' + finalResponse); }).catch(failureCallback);

Ο παραπάνω κώδικας δείχνει πώς μπορούν να αλυσοδεθούν πολλαπλές επιστροφές μετά το ένα. Η αλυσίδα είναι ένα από τα καλύτερα χαρακτηριστικά του Promises.

Δημιουργία και χρήση μιας υπόσχεσης βήμα προς βήμα

Πρώτον, χρησιμοποιούμε έναν κατασκευαστή για να δημιουργήσουμε ένα αντικείμενο Promise:

const myPromise = new Promise();

Χρειάζονται δύο παράμετροι, μία για επιτυχία (επίλυση) και μία για αποτυχία (απόρριψη):

const myPromise = new Promise((resolve, reject) => { // condition });

Τέλος, θα υπάρξει μια κατάσταση. Εάν πληρούται η προϋπόθεση, η υπόσχεση θα επιλυθεί, διαφορετικά θα απορριφθεί:

const myPromise = new Promise((resolve, reject) => { let condition; if(condition is met) { resolve('Promise is resolved successfully.'); } else { reject('Promise is rejected'); } });

Έτσι έχουμε δημιουργήσει την πρώτη μας υπόσχεση. Τώρα ας το χρησιμοποιήσουμε.

τότε () για υποσχέσεις που έχουν επιλυθεί:

Εάν επανεξετάσετε την εικόνα στην αρχή αυτής της ανάρτησης, θα δείτε ότι υπάρχουν 2 περιπτώσεις: μία για υποσχέσεις που έχουν επιλυθεί και μία για απόρριψη. Εάν η υπόσχεση επιλυθεί (περίπτωση επιτυχίας), τότε κάτι θα συμβεί στη συνέχεια (εξαρτάται από το τι κάνουμε με την επιτυχή υπόσχεση).

myPromise.then();

Η μέθοδος τότε () καλείται μετά την επίλυση της υπόσχεσης. Τότε μπορούμε να αποφασίσουμε τι να κάνουμε με την επίλυση υπόσχεσης.

Για παράδειγμα, ας καταγράψουμε το μήνυμα στην κονσόλα που λάβαμε από το Promise:

myPromise.then((message) => { console.log(message); });

catch () για απορριφθείσες υποσχέσεις:

However, the then( ) method is only for resolved Promises. What if the Promise fails? Then, we need to use the catch( ) method.

Likewise we attach the then( ) method. We can also directly attach the catch( ) method right after then( ):

myPromise.then((message) => { console.log(message); }).catch((message) => { console.log(message); });

So if the promise gets rejected, it will jump to the catch( ) method and this time we will see a different message on the console.

Wrap Up

So this is how we create a Promise in JavaScript and use it for resolved and rejected cases. Promises are a broader topic, and there are many more things to learn about them. So understanding how they work takes time.

This post is just an introduction to Promises, and I hope you found it helpful for getting an idea about what JavaScript Promises are and how to use them.

If you want to learn more about Web Development, feel free to visit my Youtube Channel for more.

Ευχαριστούμε που το διαβάσατε!