Promise
Obiekt reprezentujący wynik operacji, który pojawi się w przyszłości: wartość przy sukcesie albo błąd.
- Zwraca
- Nowy obiekt
Promisew stanie oczekiwania.
Przykład
#const promise = new Promise((resolve) => {
console.log('1. Executor startuje od razu')
setTimeout(() => resolve('3. Wynik po 300 ms'), 300)
})
promise.then((value) => console.log(value))
console.log('2. Kod po utworzeniu obietnicy')Definicja i zastosowanie
#Obietnica (Promise) to obiekt, który zastępuje wynik jeszcze niegotowej operacji, na przykład pobierania danych z serwera. Na początku jest w stanie oczekiwania (pending), a potem na stałe przechodzi w jeden z dwóch stanów: spełniona (fulfilled) z wartością albo odrzucona (rejected) z powodem błędu.
Konstruktor new Promise(executor) przyjmuje funkcję, która dostaje dwie inne funkcje: resolve do zgłoszenia sukcesu i reject do zgłoszenia błędu. Funkcja executor uruchamia się od razu, synchronicznie, w chwili tworzenia obietnicy. Na wynik reagujesz metodami then(), catch() i finally() albo słowem await.
Obietnica rozstrzyga się tylko raz. Kolejne wywołania resolve lub reject są ignorowane. Funkcje przekazane do then() zawsze wykonują się asynchronicznie, nawet gdy obietnica jest już spełniona, więc kod zapisany po nich wykona się wcześniej.
W praktyce rzadko tworzysz obietnice ręcznie. Zwracają je gotowe API, takie jak fetch(), oraz każda funkcja async. Konstruktor przydaje się głównie do opakowania starszego kodu opartego na funkcjach zwrotnych, na przykład setTimeout().
Składnia
#new Promise((resolve, reject) => { … })Parametry
#executor
function (resolve, reject)
Funkcja uruchamiana od razu przy tworzeniu obietnicy. Wywołaj w niejresolve(wartość)przy sukcesie alboreject(błąd)przy niepowodzeniu.
Więcej przykładów
#const checkAnswer = (answer) =>
new Promise((resolve, reject) => {
setTimeout(() => {
if (answer === 42) resolve('Poprawna odpowiedź!')
else reject(new Error('Spróbuj jeszcze raz'))
}, 200)
})
console.log('Sprawdzam...')
checkAnswer(42).then((message) => console.log(message))
checkAnswer(7).catch((error) => console.log(error.message))const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
console.log('Ładowanie poziomu...')
await wait(500)
console.log('Poziom załadowany')const promise = new Promise((resolve, reject) => {
resolve('pierwszy wynik')
resolve('drugi wynik')
reject(new Error('za późno'))
})
promise.then((value) => console.log(value))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
#- Zawsze obsłuż błąd obietnicy przez
catch()albotry...catchzawait. Nieobsłużone odrzucenie pojawi się w konsoli jako błąd „Uncaught (in promise)”. - Do
reject()przekazuj obiektError, a nie sam napis. Dostaniesz wtedy komunikat wmessage, nazwę błędu i stos wywołań. - Zamiast długich łańcuchów
then()w nowym kodzie zwykle czytelniejsze jestasynciawait.
Powiązane hasła
#- Promise.prototype.then()Rejestruje funkcję wywoływaną po spełnieniu obietnicy i zwraca nową obietnicę, co pozwala łączyć kroki w łańcuch.
- Promise.prototype.catch()Rejestruje funkcję obsługi błędu, wywoływaną, gdy obietnica zostanie odrzucona.
- async functionDeklaruje funkcję asynchroniczną, która zawsze zwraca obietnicę i może używać w środku słowa await.
- awaitWstrzymuje funkcję async do czasu rozstrzygnięcia obietnicy i zwraca jej wartość albo rzuca jej błąd.
- Promise.all()Czeka na spełnienie wszystkich obietnic i zwraca tablicę ich wyników. Odrzuca się przy pierwszym błędzie.
- setTimeout()Uruchamia funkcję jeden raz, po upływie podanej liczby milisekund.
Widzisz błąd albo brakuje przykładu? Napisz do nas.