Obietnice JavaScript
"Obiecuję wynik!"
„Produkcja kodu” to kod, który może zająć trochę czasu
„Kod zużywający” to kod, który musi czekać na wynik
Promise to obiekt JavaScript, który łączy wytwarzanie kodu i zużywanie kodu
Obiekt obietnicy JavaScript
Obiekt JavaScript Promise zawiera zarówno kod produkcyjny, jak i wywołania kodu zużywającego:
Składnia obietnicy
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 */ }
);
Gdy kod produkcyjny otrzyma wynik, powinien wywołać jeden z dwóch wywołań zwrotnych:
Wynik | Połączenie |
---|---|
Powodzenie | myResolve(wartość wyniku) |
Błąd | myReject(obiekt błędu) |
Obietnica właściwości obiektu
Obiektem JavaScript Promise może być:
- Aż do
- Spełniony
- Odrzucony
Obiekt Promise obsługuje dwie właściwości: state i result .
Gdy obiekt Promise jest „oczekujący” (działa), wynik jest niezdefiniowany.
Gdy obiekt Promise jest „spełniony”, wynikiem jest wartość.
Gdy obiekt Promise zostanie „odrzucony”, wynikiem jest obiekt błędu.
mojaobietnica.stan | mojaobietnica.wynik |
---|---|
"aż do" | nieokreślony |
"spełniony" | wartość wyniku |
"odrzucony" | obiekt błędu |
Nie możesz uzyskać dostępu do właściwości Promise state i result .
Do obsługi obietnic musisz użyć metody Promise.
Obiecaj, jak to zrobić
Oto jak korzystać z obietnicy:
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Promise.then() przyjmuje dwa argumenty, wywołanie zwrotne w przypadku sukcesu i drugie w przypadku niepowodzenia.
Oba są opcjonalne, więc możesz dodać wywołanie zwrotne tylko w przypadku sukcesu lub niepowodzenia.
Przykład
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);}
);
Przykłady obietnic JavaScript
Aby zademonstrować użycie obietnic, użyjemy przykładów wywołań zwrotnych z poprzedniego rozdziału:
- Czekam na limit czasu
- Czekam na plik
Czekam na limit czasu
Przykład przy użyciu funkcji oddzwaniania
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Przykład przy użyciu obietnicy
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Czekam na plik
Przykład przy użyciu funkcji oddzwaniania
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);
Przykład przy użyciu 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);}
);
Obsługa przeglądarki
ECMAScript 2015, znany również jako ES6, wprowadził obiekt JavaScript Promise.
Poniższa tabela definiuje pierwszą wersję przeglądarki z pełną obsługą obiektów Promise:
Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
Feb, 2014 | Jul, 2015 | Apr, 2014 | Sep, 2014 | Mar, 2014 |