Promise w JavaScript
- Poprzednia strona JS Asynchroniczny
- Następna strona JS Async
"I Promise a Result!"
"Producing code" (kod produkcyjny) to kod, który wymaga pewnego czasu
"Consuming code" (kod konsumpcyjny) to kod, który musi czekać na wynik
Promise to obiekt JavaScript, który łączy kod generujący i kod konsumpcyjny
Obiekt Promise w JavaScriptie
Obiekt Promise w JavaScriptie zawiera kod produkcyjny i wywołania kodu konsumpcyjnego:
Gramatyka Promise
let myPromise = new Promise(function(myResolve, myReject) { // "Producing Code" (może wymagać pewnego czasu) myResolve(); // przy sukcesie myReject(); // przy błędzie }); // "Consuming Code" (musi czekać na spełnienie obietnicy) myPromise.then( function(value) { /* Kod wywoływany przy sukcesie */ }, function(error) { /* Kod wywoływany przy błędzie */ } );
Kiedy kod jest wykonywany i uzyskuje wynik, powinien wywołać jeden z dwóch wywołań zwrotnych:
Wynik | Wywołanie |
---|---|
Sukces | myResolve(result value) |
Błąd | myReject(error object) |
Właściwości obiektu Promise
Obiekt Promise w JavaScriptu może być:
- Pending
- Fulfilled
- Rejected
Obiekt Promise obsługuje dwie właściwości:state i result.
Kiedy obiekt Promise "pending" (pracujący), wynik to "nieokreślone".
Kiedy obiekt Promise "fulfilled", wynik to wartość.
Kiedy obiekt Promise jest "rejected", wynik to obiekt błędu.
myPromise.state | myPromise.result |
---|---|
"pending" | Nieokreślone |
"fulfilled" | Wartość wynikowa |
"rejected" | Obiekt błędu |
Nie masz dostępu do właściwości Promise state i result.
Musisz używać metody Promise, aby obsługiwać Promise.
Jak używać Promise
Oto metody użycia Promise:
myPromise.then( function(value) { /* kod w przypadku sukcesu */ }, function(error) { /* kod w przypadku błędu */ } );
Promise.then() przyjmuje dwa parametry, jeden dla wywołania zwrotnego na sukces, drugi na porażkę.
Oboje są opcjonalne, więc możesz dodać wywołania zwrotne na sukces lub porażkę.
Przykład
function myDisplayer(some) { document.getElementById("demo").innerHTML = some; } let myPromise = new Promise(function(myResolve, myReject) { let x = 0; // Generowanie kodu (może to zająć trochę czasu) if (x == 0) { myResolve("OK"); } else { myReject("Błąd"); } }); myPromise.then( function(value) {myDisplayer(value);}, function(error) {myDisplayer(error);} );
Przykład JavaScript Promise
Aby pokazać użycie Promise, użyjemy przykładu wywołań zwrotnych z poprzedniego rozdziału:
- Oczekiwanie na przekroczenie limitu czasu
- Oczekiwanie na plik
Oczekiwanie na przekroczenie limitu czasu
Przykład użycia wywołań zwrotnych
setTimeout(function() { myFunction("Kocham Cię !!!"); }, 3000); function myFunction(value) { document.getElementById("demo").innerHTML = value; }
Przykład użycia Promise
let myPromise = new Promise(function(myResolve, myReject) { setTimeout(function() { myResolve("Kocham Cię !!"); }, 3000); }); myPromise.then(function(value) { document.getElementById("demo").innerHTML = value; });
Oczekiwanie na plik
Przykład użycia wywołań zwrotnych
function getFile(myCallback) { let req = new XMLHttpRequest(); req.open('GET', "mycar.html"); req.onload = function() { if (req.status == 200) {}} myCallback(req.responseText); } else { myCallback("Błąd: " + req.status); } } req.send(); } getFile(myDisplayer);
Przykład użycia 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("Nie znaleziono pliku"); } }; req.send(); }); myPromise.then( function(value) {myDisplayer(value);}, function(error) {myDisplayer(error);} );
Obsługa przeglądarek
ECMAScript 2015, również nazywany ES6, wprowadził obiekty Promise w JavaScript.
Poniższa tabela podaje pierwsze wersje przeglądarek, które w pełni obsługiwały obiekty Promise:
Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
Luty 2014 roku | Lipiec 2015 roku | Kwiecień 2014 roku | Wrzesień 2014 roku | Marzec 2014 roku |
- Poprzednia strona JS Asynchroniczny
- Następna strona JS Async