Promise.
Rejestruje funkcję wywoływaną po spełnieniu obietnicy i zwraca nową obietnicę, co pozwala łączyć kroki w łańcuch.
- Zwraca
- Nową obietnicę, spełnioną wartością zwróconą przez funkcję albo odrzuconą, jeśli funkcja rzuci błąd.
Przykład
#const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms))
wait(200, 120)
.then((points) => points + 30)
.then((points) => {
console.log(`Masz ${points} punktów`)
return wait(200, points >= 150)
})
.then((levelUp) => console.log('Nowy poziom:', levelUp))Definicja i zastosowanie
#Metoda then() przyjmuje funkcję, która zostanie wywołana z wartością obietnicy, gdy ta się spełni. Opcjonalny drugi argument to funkcja obsługi błędu, ale zwykle zamiast niego używa się osobnego catch() na końcu łańcucha.
then() zawsze zwraca nową obietnicę. Jej wartością staje się to, co zwróci Twoja funkcja. Zwykła wartość trafia od razu do następnego then(), a zwrócona obietnica sprawia, że łańcuch poczeka na jej wynik. Dzięki temu kolejne kroki (pobierz, przetwórz, wyświetl) układają się jeden pod drugim zamiast zagnieżdżać.
Najczęstszy błąd to brak return w środku łańcucha. Następny krok dostaje wtedy undefined i nie czeka na zakończenie operacji asynchronicznej rozpoczętej w poprzednim kroku.
Składnia
#promise.then(onFulfilled)
promise.then(onFulfilled, onRejected)Parametry
#onFulfilled
function (value)
Funkcja wywoływana z wartością spełnionej obietnicy. To, co zwróci, stanie się wartością nowej obietnicy.onRejected
opcjonalna function (reason)
Funkcja wywoływana, gdy obietnica zostanie odrzucona. Zwykle wygodniej użyćcatch().
Więcej przykładów
#const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms))
wait(100, 'Lekcja 1')
.then((lesson) => {
wait(100, lesson + ' ukończona')
})
.then((result) => console.log(result))Funkcja w klamrach bez return zwraca undefined, więc następny then() nie czeka na wewnętrzną obietnicę. Wystarczy dopisać return albo usunąć klamry.
Promise.resolve('z obietnicy').then((value) => console.log(value))
console.log('synchronicznie')Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- W każdym kroku łańcucha zwracaj wartość lub obietnicę. Funkcja strzałkowa bez klamer robi to automatycznie.
- Jeden
catch()na końcu łańcucha złapie błąd z dowolnego wcześniejszego kroku. - Przy wielu krokach rozważ
asynciawait. Taki kod czyta się jak zwykły, wykonywany z góry na dół.
Powiązane hasła
#- PromiseObiekt reprezentujący wynik operacji, który pojawi się w przyszłości: wartość przy sukcesie albo błąd.
- Promise.prototype.catch()Rejestruje funkcję obsługi błędu, wywoływaną, gdy obietnica zostanie odrzucona.
- Promise.prototype.finally()Rejestruje funkcję wywoływaną po rozstrzygnięciu obietnicy, bez względu na to, czy skończyła się sukcesem, czy błędem.
- awaitWstrzymuje funkcję async do czasu rozstrzygnięcia obietnicy i zwraca jej wartość albo rzuca jej błąd.
- fetch()Wysyła zapytanie HTTP i zwraca obietnicę z odpowiedzią serwera (obiektem Response).
Widzisz błąd albo brakuje przykładu? Napisz do nas.