await
Wstrzymuje funkcję async do czasu rozstrzygnięcia obietnicy i zwraca jej wartość albo rzuca jej błąd.
- Zwraca
- Wartość spełnionej obietnicy. Przy odrzuceniu rzuca błąd.
Przykład
#const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms))
console.log('Pobieram wynik testu...')
const score = await wait(300, 87)
console.log(`Wynik: ${score}%`)Definicja i zastosowanie
#Operator await stawiasz przed obietnicą. Funkcja async zatrzymuje się w tym miejscu, a gdy obietnica się spełni, await zwraca jej wartość i kod idzie dalej. Jeśli obietnica zostanie odrzucona, await rzuca błąd, który złapiesz blokiem try...catch.
Zatrzymuje się tylko bieżąca funkcja, a nie cała strona. W tym czasie przeglądarka obsługuje kliknięcia, animacje i inny kod. await działa wewnątrz funkcji async oraz na najwyższym poziomie modułów JavaScript, tak jak w przykładach na tej stronie.
Kolejne await wykonują się po kolei. Jeśli operacje nie zależą od siebie, uruchom je razem i poczekaj na wszystkie przez await Promise.all([...]). Całość potrwa tyle, ile najdłuższa operacja, a nie suma ich czasów.
Składnia
#const result = await promiseParametry
#promise
obietnica lub dowolna wartość
Obietnica, na którą czekasz. Zwykła wartość zostanie zwrócona bez zmian.
Więcej przykładów
#const fail = (ms, message) =>
new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms))
try {
await fail(200, 'Sesja wygasła')
console.log('Tego nie zobaczysz')
} catch (error) {
console.log('Błąd:', error.message)
}const task = (name, ms) =>
new Promise((resolve) => {
console.log(`start: ${name}`)
setTimeout(() => {
console.log(`koniec: ${name}`)
resolve(name)
}, ms)
})
console.log('Po kolei')
await task('profil', 200)
await task('kursy', 100)
console.log('Równolegle')
await Promise.all([task('profil', 200), task('kursy', 100)])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
#- Nie zapominaj o
awaitprzed wywołaniem funkcjiasync. Bez niego dostaniesz obietnicę zamiast wyniku, a jej błąd nie trafi do Twojegotry...catch. - Niezależne operacje uruchamiaj razem i czekaj na nie przez
await Promise.all([...])zamiast pisać kilkaawaitpo kolei. awaitnie zadziała w zwykłej funkcji ani w funkcji przekazanej doforEach(). Do pętli z oczekiwaniem użyjfor...ofw funkcjiasync.
Powiązane hasła
#- async functionDeklaruje funkcję asynchroniczną, która zawsze zwraca obietnicę i może używać w środku słowa await.
- PromiseObiekt reprezentujący wynik operacji, który pojawi się w przyszłości: wartość przy sukcesie albo błąd.
- Promise.all()Czeka na spełnienie wszystkich obietnic i zwraca tablicę ich wyników. Odrzuca się przy pierwszym błędzie.
- try...catchPrzechwytuje błędy rzucone w bloku try i obsługuje je w catch. Opcjonalny finally wykona się zawsze.
- for...ofPrzechodzi po kolejnych wartościach obiektu iterowalnego: tablicy, napisu, Map, Set i innych.
Widzisz błąd albo brakuje przykładu? Napisz do nas.