Υποσχέσεις JavaScript

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

"Υπόσχομαι ένα αποτέλεσμα!"

Η "Παραγωγή κώδικα" είναι κώδικας που μπορεί να πάρει κάποιο χρόνο

Το "Consuming Code" είναι κωδικός που πρέπει να περιμένει για το αποτέλεσμα

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

JavaScript Promise Object

Ένα αντικείμενο JavaScript Promise περιέχει τόσο τον κώδικα παραγωγής όσο και κλήσεις προς τον καταναλωτή κώδικα:

Σύνταξη υπόσχεσης

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

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

Success

myResolve (τιμή αποτελέσματος)

Error

myReject (αντικείμενο σφάλματος)

Promise Object Properties

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

  • εκκρεμής

  • Εκπληρωμένος

  • Απορρίφθηκε

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

Ενώ ένα αντικείμενο Promise "εκκρεμεί" (λειτουργεί), το αποτέλεσμα είναι απροσδιόριστο.

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

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

"pending"

απροσδιόριστος

"fulfilled"

μια τιμή αποτελέσματος

"rejected"

ένα αντικείμενο σφάλματος

Δεν μπορείτε να αποκτήσετε πρόσβαση στην κατάσταση και στο αποτέλεσμα των ιδιοτήτων Promise.

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

Υπόσχεση How To

Δείτε πώς μπορείτε να χρησιμοποιήσετε μια υπόσχεση:

myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

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

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

Παράδειγμα

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// The producing code (this may take some time)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// some code (try to change x to 5)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>

</body>
</html>

Παραδείγματα υποσχέσεων JavaScript

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

  • Αναμονή για ένα Timeout

  • Αναμονή για ένα αρχείο

Αναμονή για ένα Timeout

Παράδειγμα Χρήσης Επανάκλησης

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}
</script>

</body>
</html>

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

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

Αναμονή για αρχείο

Παράδειγμα με χρήση της επιστροφής κλήσης

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);

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Callbacks</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

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

getFile(myDisplayer); 
</script>

</body>
</html>

Παράδειγμα χρησιμοποιώντας το 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);}
);

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  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);}
);
</script>

</body>
</html>

Υποστήριξη προγράμματος περιήγησης

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

Ο παρακάτω πίνακας ορίζει την πρώτη έκδοση του προγράμματος περιήγησης με πλήρη υποστήριξη για αντικείμενα Promise:

Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Feb, 2014 Jul, 2015 Apr, 2014 Sep, 2014 Mar, 2014