Promise i async/await — wynik przyjdzie później

Po tej lekcji potrafisz

Wczytywanie wyników turnieju

W prawdziwej aplikacji dane mogą przyjść z pliku albo serwera. W ćwiczeniach użyjemy lokalnych obietnic i krótkiego timera, żeby każdy uczeń dostał ten sam wynik bez sieci. Promise reprezentuje przyszły rezultat, a nie samą gotową listę.

Małe kroki, konkretne efekty

async zawsze zwraca Promise

Wartość zwrócona przez async zostaje opakowana w obietnicę. await w funkcji async wstrzymuje dalszą część tej funkcji do rozstrzygnięcia obietnicy. Nie blokuje całego programu.

async function punkty(): Promise<number> { return 42; }
async function main(): Promise<void> {
  const wynik = await punkty();
  console.log("Punkty: " + wynik);
}
main().catch(console.error);

Punkty: 42

main().catch(…) obsługuje odrzucenie głównej funkcji. Samo void main() nie przechwytuje błędów.

then działa po bieżącym kodzie

Obietnica może być już spełniona, ale callback then i tak wykona się po zakończeniu bieżącego synchronicznego fragmentu. Nie próbuj odczytywać przyszłego wyniku z zewnętrznej zmiennej zaraz po wywołaniu.

console.log("A");
Promise.resolve(7).then(n => console.log("B: " + n));
console.log("C");

A
C
B: 7

Promise ma stan oczekiwania, spełnienia lub odrzucenia. Wynik rozstrzygniętej obietnicy nie zmienia się ponownie.

Wyniki z symulowanego źródła

Timer symuluje krótkie oczekiwanie. Wariant false zgłasza problem połączenia. Nie pobieramy żadnych danych z internetu.

function pobierz(dostepne: boolean): Promise<number[]> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (dostepne) { resolve([10, 20, 30]); }
      else { reject(new Error("Źródło niedostępne")); }
    }, 10);
  });
}
async function raport(ok: boolean): Promise<void> {
  try {
    const wyniki = await pobierz(ok);
    console.log("Suma: " + wyniki.reduce((s, n) => s + n, 0));
  } catch (e) {
    console.log(e instanceof Error ? e.message : "Nieznany błąd");
  }
}
async function main(): Promise<void> {
  await raport(true);
  await raport(false);
}
main().catch(console.error);

Suma: 60
Źródło niedostępne

Jak program dochodzi do wyniku

1. new Promise otrzymuje funkcję z resolve i reject. To narzędzia do rozstrzygnięcia obietnicy.
2. setTimeout planuje callback; 10 ms to próg, nie gwarantowany dokładny czas wykonania.
3. await sprawia, że odrzucenie trafia do otaczającego catch.
4. Dwa await w main gwarantują kolejność raportów.

Zmień kod i zobacz, co się stanie

Kilka niezależnych wyników

Promise.all zbiera wyniki w kolejności wejściowych obietnic, nie kolejności ich zakończenia. Odrzuci się po odrzuceniu jednej; pozostałych operacji automatycznie nie anuluje.

async function main(): Promise<void> {
  const [a, b] = await Promise.all([Promise.resolve(10), Promise.resolve(20)]);
  console.log(a + b);
  const wyniki = await Promise.allSettled([Promise.resolve("OK"), Promise.reject(new Error("Brak"))]);
  for (const w of wyniki) { console.log(w.status); }
}
main().catch(console.error);

30
fulfilled
rejected

allSettled czeka na wszystkie wyniki i opisuje każdy statusem. forEach z async nie czeka na callbacki. Do kolejności użyj for…of z await, a do niezależnych operacji map i Promise.all.

Gdy wynik zaskakuje

Teraz Twoja kolej

Rozwiązanie jest jedną z możliwości. Zanim je odkryjesz, uruchom własną wersję dla podanych danych i przynajmniej jednego przypadku brzegowego.

async function nagroda(): Promise<number> { return 100; }
async function main(): Promise<void> { console.log(await nagroda()); }
main().catch(console.error);

100

console.log("Start");
Promise.resolve().then(() => console.log("Wynik"));
console.log("Dalej");

Start
Dalej
Wynik

async function pobierz(): Promise<number> { throw new Error("Serwer zajęty"); }
async function main(): Promise<void> {
  try { console.log(await pobierz()); }
  catch (e) { if (e instanceof Error) { console.log(e.message); } }
}
main().catch(console.error);

Serwer zajęty

async function nick(id: number): Promise<string> { return "Gracz " + id; }
async function main(): Promise<void> {
  const nicki = await Promise.all([1, 2, 3].map(id => nick(id)));
  console.log(nicki.join(", "));
}
main().catch(console.error);

Gracz 1, Gracz 2, Gracz 3

Co zabierasz do następnej lekcji

• Promise<T> reprezentuje przyszły wynik typu T.
• await ułatwia zapis kolejności i obsługi odrzuceń.
• Promise.all i allSettled służą różnym oczekiwaniom wobec błędów.