Ξεκινώντας με υποσχέσεις JavaScript

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

Έτσι, δεν αφαιρούν μόνο την ικανότητά μας να ελέγξουμε εκτέλεση της λειτουργίας αλλά και να κάνει διαχείριση σφαλμάτων λίγο από μια ταλαιπωρία. Αυτό είναι όπου το Υπόσχεση αντικείμενο έρχεται, καθώς σκοπεύει να συμπληρώσει ορισμένα από τα οπών σε ασύγχρονη κωδικοποίηση.

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

Σύνταξη

Μπορούμε να δημιουργήσουμε ένα παράδειγμα του Υπόσχεση αντικείμενο χρησιμοποιώντας το νέος λέξη-κλειδί:

 νέα υπόσχεση (λειτουργία (επίλυση, απόρριψη) ); 

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

Κράτη μέλη της Υπόσχεση αντικείμενο

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

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

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

Για να πάει από εκκρεμής προς το εκπληρωθεί κατάσταση, αποφασίζω() λέγεται. Για να πάει από εκκρεμής προς το απορρίφθηκε κατάσταση, απορρίπτω() λέγεται.

ο έπειτα και σύλληψη μεθόδων

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

Παράδειγμα 1

“Μη-Promisified” κώδικας

Ας υποθέσουμε ότι υπάρχει α hello.txt αρχείο που περιέχει το “γεια σας” λέξη. Εδώ μπορείτε να γράψετε ένα αίτημα AJAX φέρε το αρχείο και παρουσιάστε το περιεχόμενό της, χωρίς να χρησιμοποιήσετε το Υπόσχεση αντικείμενο:

 συνάρτηση getTxt () let xhr = νέα XMLHttpRequest (); xhr.open ('GET', 'hello.txt'). xhr.overrideMimeType ('κείμενο / απλό'); xhr.send (); xhr.onload = συνάρτηση () try switch (this.status) περίπτωση 200: document.write (this.response); Διακοπή; περίπτωση 404: ρίξτε "Το αρχείο δεν βρέθηκε"; default: ρίξτε 'Απέτυχε η ανάκτηση του αρχείου';  αλίευση (err) console.log (err).  getTxt (); 

Αν το περιεχόμενο του αρχείου ήταν με επιτυχία, δηλ. ο κωδικός κατάστασης απόκρισης είναι 200, το κείμενο απάντησης είναι εγγράφεται στο έγγραφο. Εάν το αρχείο είναι δεν βρέθηκε (κατάσταση 404), ένα “Το αρχείο δε βρέθηκε” Εμφανίζεται μήνυμα λάθους. Διαφορετικά, α γενικό μήνυμα σφάλματος υποδεικνύοντας την αποτυχία της φόρτωσης του αρχείου.

“Επιβεβαιωμένη” κώδικας

Τώρα, ας είναι Επιβεβαιώστε τον παραπάνω κωδικό:

 Λειτουργία getTxt () επιστρέφει νέα Promise (λειτουργία (επίλυση, απόρριψη) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.send (); xhr.onload = συνάρτηση () switch (this.status) περίπτωση 200: επίλυση (this.response) · περίπτωση 404: απόρριψη (' φέρετε το αρχείο ')??);  getTxt () και στη συνέχεια (λειτουργία (txt) document.write (txt);) catch (λειτουργία (err) console.log (err)); 

ο getTxt () η λειτουργία είναι τώρα κωδικοποιημένη σε επιστρέψτε μια νέα εμφάνιση του Υπόσχεση αντικείμενο, και η λειτουργία του εκτελεστή διατηρεί τον ασύγχρονο κώδικα από πριν.

Οταν ο ο κωδικός κατάστασης απόκρισης είναι 200, ο Υπόσχεση είναι εκπληρωθεί με κλήση αποφασίζω() (η απόκριση μεταβιβάζεται ως η παράμετρος του αποφασίζω()). Όταν ο κωδικός κατάστασης είναι 404 ή κάποιο άλλο, το Υπόσχεση είναι απορρίφθηκε χρησιμοποιώντας απορρίπτω() (με το κατάλληλο μήνυμα λάθους ως παράμετρο του απορρίπτω()).

ο χειριστές συμβάντων για το έπειτα() και σύλληψη() μεθόδων απο Υπόσχεση αντικείμενο είναι προστέθηκε στο τέλος.

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

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

ο κύριο πλεονέκτημα της παραπάνω Promised έκδοση του κώδικα είναι το διαχείριση σφαλμάτων. Αντί να ρίχνουν τις Εξωραϊσμένες Εξαιρέσεις γύρω -όπως στην μη-Promised έκδοση - το κατάλληλα μηνύματα βλάβης επιστρέφονται και καταγράφονται.

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

Παράδειγμα 2

“Μη-Promisified” κώδικας

Αντί απλά να εμφανίζεται το κείμενο από hello.txt, θέλω να Συνδυάστε το με το “Κόσμος” λέξη και να την εμφανίσετε στην οθόνη μετά από ένα χρονικό όριο 2 δευτερολέπτων. Εδώ είναι ο κώδικας που χρησιμοποιώ:

 συνάρτηση getTxt () let xhr = νέα XMLHttpRequest (); xhr.open ('GET', 'hello.txt'). xhr.overrideMimeType ('κείμενο / απλό'); xhr.send (); xhr.onload = συνάρτηση () try switch (this.status) περίπτωση 200: document.write (concatTxt (this.response)); Διακοπή; περίπτωση 404: ρίξτε "Το αρχείο δεν βρέθηκε"; default: ρίξτε 'Απέτυχε η ανάκτηση του αρχείου';  αλίευση (err) console.log (err).  συνάρτηση concatTxt (res) setTimeout (λειτουργία () επιστροφή (res + 'Παγκόσμια'), 2000);  getTxt (); 

Στον κωδικό κατάστασης 200, το concatTxt () λειτουργία Συνδυάστε το κείμενο απόκρισης με το “Κόσμος” λέξη πριν την εγγράψετε στο έγγραφο.

Αλλά, αυτός ο κώδικας δεν θα λειτουργήσει όπως επιθυμείτε. ο setTimeout () λειτουργία επανάκλησης δεν μπορεί να επαναφέρει τη συνεστραμμένη συμβολοσειρά. Αυτό που θα εκτυπωθεί στο έγγραφο είναι απροσδιόριστος γιατί αυτό είναι τι concatTxt () επιστρέφει.

“Επιβεβαιωμένη” κώδικας

Έτσι, για να γίνει ο κώδικας εργασίας, ας είναι Επιβεβαιώστε τον παραπάνω κωδικό, συμπεριλαμβανομένου concatTxt ():

 Λειτουργία getTxt () επιστρέφει νέα Promise (λειτουργία (επίλυση, απόρριψη) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.send (); xhr.onload = συνάρτηση () switch (this.status) περίπτωση 200: επίλυση (this.response) · περίπτωση 404: απόρριψη (' φέρετε το αρχείο ')??);  λειτουργία concatTxt (txt) επιστροφή νέου Promise (λειτουργία (επίλυση, απόρριψη) setTimeout (function () resolve (txt + 'Παγκόσμιο');  (), τότε ((txt) => return concatTxt (txt), και στη συνέχεια ((txt) => document.write (txt);) catch ((err) => console. log (err) ·). 

Οπως ακριβώς getTxt (), ο concatTxt () λειτουργία επίσης επιστρέφει ένα νέο Υπόσχεση αντικείμενο αντί του συνδυασμένου κειμένου. ο Υπόσχεση επιστρέφεται από concatTxt () είναι επιλυθεί εντός της λειτουργίας επανάκλησης του setTimeout ().

Κοντά στο τέλος του παραπάνω κώδικα, ο διαχειριστής συμβάντων του πρώτου έπειτα() η μέθοδος εκτελείται όταν το Υπόσχεση του getTxt () είναι εκπληρωθεί, δηλαδή όταν είναι το αρχείο με επιτυχία. Μέσα στον χειριστή, concatTxt () λέγεται και το Υπόσχεση επιστρέφεται από concatTxt () επιστρέφεται.

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

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

Σε αυτήν την Promised έκδοση, το “Γειά σου Κόσμε” string θα είναι εκτυπώθηκε με επιτυχία στο έγγραφο.