Promise i async/await — JavaScript

Niektóre operacje, np. pobieranie danych, kończą się dopiero po pewnym czasie.

Jak to działa?

Promise opisuje wynik, który będzie dostępny później. async pozwala używać await, aby poczekać na zakończenie operacji bez blokowania całej strony.

W realnym kodzie obsłuż także ewentualne błędy przez try/catch.

Przykład 1 — poznaj zapis

async function loadUser() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  if (!response.ok) throw new Error("Błąd HTTP");
  const user = await response.json();
  console.log(user.name);
}

loadUser().catch(console.error);

Przykład wymaga połączenia z internetem i korzysta z publicznego testowego API.

Przeczytaj kod linijka po linijce

async function loadUser() {Definiujemy funkcję lub metodę, której można użyć później.
const response = await fetch("https://jsonplaceholder.typicode.com/users/1");Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.
if (!response.ok) throw new Error("Błąd HTTP");Sprawdzamy warunek lub wybieramy jedną z możliwości.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Zależnie od dostępności sieci: pobrane dane użytkownika lub błąd żądania.

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

async function answer() { return 42; }
answer().then(result => console.log(result));

Wynik drugiego przykładupo uruchomieniu przykładu

42 (asynchronicznie)

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Zmień adres tak, aby pobrać użytkownika o identyfikatorze 2.