Promise JavaScript

"I Promise a Result!"

"Producing code (κώδικας παραγωγής)" είναι ο κώδικας που χρειάζεται χρόνο

"Consuming code (κώδικας κατανάλωσης)" είναι ο κώδικας που πρέπει να περιμένει το αποτέλεσμα

Το Promise είναι ένα αντικείμενο JavaScript που συνδέει τον κώδικα δημιουργίας και τον κώδικα κατανάλωσης

Το αντικείμενο Promise του JavaScript

Το αντικείμενο Promise του JavaScript περιλαμβάνει τον κώδικα παραγωγής και την κλήση κώδικα κατανάλωσης:

Γραμματική του Promise

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (μπορεί να χρειαστεί χρόνο)
  myResolve(); // Επιτυχία
  myReject();  // Σφάλμα
});
// "Consuming Code" (πρέπει να περιμένετε μια εκπληρωμένη υπόσχεση)
myPromise.then(
  function(value) { /* Κώδικας όταν επιτύχει η επιτυχία */ },
  function(error) { /* Κώδικας όταν συμβεί σφάλμα */ }
);

Όταν εκτελείτε κώδικα και λαμβάνετε αποτέλεσμα, πρέπει να καλέσετε έναν από τους δύο κλήσεις:

Αποτέλεσμα Κλήση
Επιτυχία myResolve(τιμή αποτελέσματος)
Σφάλμα myReject(αντικείμενο σφάλματος)

Ιδιότητες του αντικειμένου Promise

Το αντικείμενο Promise του JavaScript μπορεί να είναι:

  • Pending
  • Fulfilled
  • Rejected

Το αντικείμενο Promise υποστηρίζει δύο ιδιότητες:state και result.

Όταν το αντικείμενο Promise είναι "pending" (εργασία), το αποτέλεσμα είναι undefined.

Όταν το αντικείμενο Promise είναι "fulfilled", το αποτέλεσμα είναι μια τιμή.

Όταν το αντικείμενο Promise είναι "rejected", το αποτέλεσμα είναι ένα αντικείμενο σφάλματος.

myPromise.state myPromise.result
"pending" undefined
"fulfilled" Αξία αποτελέσματος
"rejected" Αντικείμενο error

Δεν μπορείτε να προσέξετε τις ιδιότητες του Promise state και result.

Πρέπει να χρησιμοποιήσετε τη μέθοδο Promise για να χειριστείτε το Promise.

Πώς να χρησιμοποιήσετε το Promise

Ακολουθεί η μέθοδος χρήσης της Promise:

myPromise.then(
  function(value) { /* κώδικας αν επιτυχία */ },
  function(error) { /* κώδικας αν κάποιο σφάλμα */ }
);

Το Promise.then() έχει δύο παραμέτρους, μια για τον callback επιτυχίας και μια για τον callback αποτυχίας.

Και τα δύο είναι προαιρετικά, οπότε μπορείτε να προσθέσετε callback για επιτυχία ή αποτυχία.

Παράδειγμα

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Γεννηθείς κώδικας (μπορεί να χρειαστεί χρόνο)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Δοκιμάστε το προσωπικά

Παράδειγμα Promise σε JavaScript

Για να δείξουμε τη χρήση της Promise, θα χρησιμοποιήσουμε το παράδειγμα του callback από το προηγούμενο κεφάλαιο:

  • Αναμονή υπερβολής χρόνου
  • Αναμονή αρχείου

Αναμονή υπερβολής χρόνου

Παράδειγμα χρήσης callback

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Δοκιμάστε το προσωπικά

Παράδειγμα χρήσης Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Δοκιμάστε το προσωπικά

Αναμονή αρχείου

Παράδειγμα χρήσης callback

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(req.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

Δοκιμάστε το προσωπικά

Παράδειγμα χρήσης Promise

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Δοκιμάστε το προσωπικά

Υποστήριξη περιηγητών

Το ECMAScript 2015, γνωστό και ως ES6, εισήγαγε το αντικείμενο Promise του JavaScript.

Η παρακάτω τаблицή αναφέρει την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως το αντικείμενο Promise:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Φεβρουάριος 2014 Ιούλιος 2015 Απρίλιος 2014 Σεπτέμβριος 2014 Μάρτιος 2014