Υποσχέσεις JavaScript και δέσμευση υπόσχεσης

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

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

Μια υπόσχεση μπορεί να έχει μία από τις τρεις πολιτείες.

  • εκκρεμής
  • Εκπληρώθηκε
  • Απορρίφθηκε

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

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

Δημιουργήστε μια υπόσχεση

Για να δημιουργήσουμε ένα αντικείμενο υπόσχεσης, χρησιμοποιούμε τον Promise()κατασκευαστή.

 let promise = new Promise(function(resolve, reject)( //do something ));

Ο Promise()κατασκευαστής παίρνει μια συνάρτηση ως επιχείρημα. Η συνάρτηση δέχεται επίσης δύο λειτουργίες resolve()και reject().

Εάν η υπόσχεση επιστρέψει με επιτυχία, resolve()καλείται η συνάρτηση. Και, εάν παρουσιαστεί σφάλμα, reject()καλείται η συνάρτηση.

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

Παράδειγμα 1: Πρόγραμμα με υπόσχεση

 const count = true; let countValue = new Promise(function (resolve, reject) ( if (count) ( resolve("There is a count value."); ) else ( reject("There is no count value"); ) )); console.log(countValue);

Παραγωγή

 Υπόσχεση (: "Υπάρχει μια τιμή μέτρησης.")

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

Η υπόσχεση επιλύεται εάν η αξία της μέτρησης είναι αληθινή.

Εργασία υπόσχεσης JavaScript

Αλυσίδα υπόσχεσης JavaScript

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

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

Η μέθοδος JavaScript τότε ()

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

Η σύνταξη της then()μεθόδου είναι:

 promiseObject.then(onFulfilled, onRejected);

Παράδειγμα 2: Δέσμευση της υπόσχεσης με τότε ()

 // returns a promise let countValue = new Promise(function (resolve, reject) ( resolve('Promise resolved'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); ), ) .then( function successValue1() ( console.log('You can call multiple functions this way.'); ), );

Παραγωγή

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

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

Μπορείτε να αλυσοδέσετε πολλές then()μεθόδους με την υπόσχεση.

Μέθοδος Java catch ()

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

 // returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); ), ) // executes if there is an error .catch( function errorValue(result) ( console.log(result); ) );

Παραγωγή

 Η υπόσχεση απορρίφθηκε

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

Εργασία της αλυσίδας υπόσχεσης JavaScript

JavaScript Promise Versus Callback

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

JavaScript callback functions can also be used to perform synchronous tasks.

Their differences can be summarized in the following points:

JavaScript Promise

  1. The syntax is user-friendly and easy to read.
  2. Error handling is easier to manage.
  3. Example: 
     api().then(function(result) ( return api2() ; )).then(function(result2) ( return api3(); )).then(function(result3) ( // do work )).catch(function(error) ( //handle any error that may occur before this point ));

JavaScript Callback

  1. The syntax is difficult to understand.
  2. Error handling may be hard to manage.
  3. Example: 
     api(function(result)( api2(function(result2)( api3(function(result3)( // do work if(error) ( // do something ) else ( // do something ) )); )); ));

JavaScript finally() method

You can also use the finally() method with promises. The finally() method gets executed when the promise is either resolved successfully or rejected. For example,

 // returns a promise let countValue = new Promise(function (resolve, reject) ( // could be resolved or rejected resolve('Promise resolved'); )); // add other blocks of code countValue.finally( function greet() ( console.log('This code is executed.'); ) );

Output

 This code is executed.

JavaScript Promise Methods

There are various methods available to the Promise object.

Method Description
all(iterable) Waits for all promises to be resolved or any one to be rejected
allSettled(iterable) Waits until all promises are either resolved or rejected
any(iterable) Returns the promise value as soon as any one of the promises is fulfilled
race(iterable) Wait until any of the promises is resolved or rejected
reject(reason) Returns a new Promise object that is rejected for the given reason
resolve(value) Returns a new Promise object that is resolved with the given value
catch() Appends the rejection handler callback
then() Appends the resolved handler callback
finally() Appends a handler to the promise

To learn more about promises in detail, visit JavaScript Promises.

ενδιαφέροντα άρθρα...