async/await w JavaScript: asynchroniczny kod czytany z góry na dół

async/await to po prostu przebrane obietnice

async/await nie jest nowym modelem współbieżności. To lukier składniowy na obietnicach (promise), który pozwala pisać kod, który wygląda na sekwencyjny, choć jest asynchroniczny. Ten sam mechanizm, znacznie przyjaźniejsza forma.

Oto to samo zadanie zapisane na oba sposoby:

function fetchUserPromise(id) {
  return fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
    .then((res) => res.json())
    .then((user) => user.name);
}

async function fetchUserAsync(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const user = await res.json();
  return user.name;
}

fetchUserPromise(1).then(console.log);
fetchUserAsync(2).then(console.log);

Obie funkcje zwracają obietnicę. Obie robią dokładnie to samo. Wersję async czyta się z góry na dół, bez łańcucha .then, i właśnie na tym polega jej urok.

async oznacza, że funkcja zwraca obietnicę

Postaw async przed function, funkcją strzałkową albo metodą, a wydarzą się dwie rzeczy:

1. Funkcja zawsze zwraca obietnicę. Cokolwiek zwrócisz przez return, staje się rozwiązaną wartością.
2. Możesz używać w niej await.

async function greet(name) {
  return `Hello, ${name}`;
}

const result = greet("Ada");
console.log(result);              // Promise { 'Hello, Ada' }
result.then((msg) => console.log(msg));

Zwróć uwagę, że result nie jest stringiem, tylko obietnicą, która rozwiązuje się do stringa. Choć greet nie zawiera żadnego await ani pracy asynchronicznej, słowo kluczowe async i tak opakowuje zwracaną wartość w obietnicę. Jeśli funkcja rzuci wyjątek, obietnica zostanie odrzucona.

await wstrzymuje, dopóki obietnica się nie rozstrzygnie

Wewnątrz funkcji async wyrażenie await somePromise wstrzymuje tę funkcję do czasu rozwiązania obietnicy, a potem oddaje ci rozwiązaną wartość. Jeśli obietnica zostanie odrzucona, await rzuca wyjątek.

function wait(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function countdown() {
  console.log("3");
  await wait(500);
  console.log("2");
  await wait(500);
  console.log("1");
  await wait(500);
  console.log("Start!");
}

countdown();
console.log("odliczanie rozpoczęte");

Obserwuj kolejność wyjścia. "odliczanie rozpoczęte" pojawia się przed "2", bo await wstrzymuje tylko funkcję async, a nie resztę programu. Event loop działa dalej, a countdown po prostu wznawia pracę później, gdy każda obietnica wait się rozwiąże.

Możesz robić await na wszystkim, co przypomina obietnicę. await 42 też jest poprawne: wartości niebędące obietnicami zostają opakowane w Promise.resolve(42) i rozwiązane od razu.

Obsługa błędów przez try/catch

Przy zwykłych obietnicach dołączasz .catch(). Przy async/await odrzucona obietnica staje się rzuconym wyjątkiem, który łapiesz w normalny sposób:

async function loadUser(id) {
  try {
    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
    if (!res.ok) {
      throw new Error(`HTTP ${res.status}`);
    }
    const user = await res.json();
    return user.name;
  } catch (err) {
    console.error("loadUser nie powiodło się:", err.message);
    return null;
  }
}

loadUser(1).then((name) => console.log("otrzymano:", name));
loadUser(99999).then((name) => console.log("otrzymano:", name));

Jeden try/catch obejmuje każdy await w środku. Awarie sieci, błędy parsowania JSON i twoje własne instrukcje throw trafiają do tego samego catch. To realna poprawa w porównaniu z zagnieżdżonymi łańcuchami .then/.catch.

Jedna rzecz, na którą trzeba uważać: fetch odrzuca obietnicę tylko przy błędach sieci, a nie przy HTTP 4xx/5xx. Sam sprawdzasz res.ok i rzucasz błąd: ten wzorzec zobaczysz w prawdziwym kodzie na każdym kroku.

Nie rób await w pętli, jeśli nie musisz

To najczęstsza pułapka async/await. Sekwencyjne await w pętli oznacza, że każda iteracja czeka na poprzednią:

function wait(ms, label) {
  return new Promise((resolve) => setTimeout(() => resolve(label), ms));
}

async function sequential() {
  const start = Date.now();
  const a = await wait(300, "A");
  const b = await wait(300, "B");
  const c = await wait(300, "C");
  console.log([a, b, c], `${Date.now() - start}ms`);
}

async function parallel() {
  const start = Date.now();
  const [a, b, c] = await Promise.all([
    wait(300, "A"),
    wait(300, "B"),
    wait(300, "C"),
  ]);
  console.log([a, b, c], `${Date.now() - start}ms`);
}

sequential();
parallel();

sequential trwa około 900 ms. parallel trwa około 300 ms. Zasada praktyczna: jeśli zadania nie zależą od swoich wyników, uruchom je wszystkie, a potem zrób await Promise.all. Rób await jedno po drugim tylko wtedy, gdy kolejne wywołanie naprawdę potrzebuje poprzedniego wyniku.

Dla kolekcji idiomem jest Promise.all(items.map(async (x) => ...)). Zwykłe for...of z await w środku działa szeregowo: czasem właśnie tego chcesz (ograniczanie liczby zapytań, zachowanie kolejności), ale zwykle nie.

Łączenie async/await i zwykłych obietnic

Nie musisz wybierać strony. Funkcje async zwracają obietnice, a await działa na każdej obietnicy, więc możesz je swobodnie mieszać:

async function getJSON(url) {
  const res = await fetch(url);
  return res.json();
}

// Call an async function and chain like any promise:
getJSON("https://jsonplaceholder.typicode.com/users/1")
  .then((user) => console.log(user.name))
  .catch((err) => console.error(err));

// Or await it from another async function:
async function main() {
  const user = await getJSON("https://jsonplaceholder.typicode.com/users/1");
  console.log(user.name);
}

main();

Oba style są wymienne. Używaj await, gdy kod lepiej czyta się z góry na dół, a .then, gdy chcesz szybkiego jednorazowego wywołania albo pracujesz poza kontekstem async.

Top-level await (w modułach ES)

Dawniej trzeba było opakowywać await w funkcję async, bo await nie był dozwolony na najwyższym poziomie skryptu. To się zmieniło: wewnątrz modułu ES (pliku .mjs albo <script type="module">) możesz teraz robić await bezpośrednio na najwyższym poziomie:

// in an ES module
const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
const user = await res.json();
console.log(user.name);

Top-level await opóźnia zakończenie ładowania modułu, dopóki obietnica się nie rozstrzygnie, a każdy moduł, który go importuje, też czeka. Przydaje się do wczytywania konfiguracji i dynamicznych importów, ale używaj go oszczędnie: wolny top-level await blokuje wszystkich, którzy importują ten moduł.

W plikach CommonJS i zwykłych skryptach inline to nadal kończy się błędem SyntaxError. Klasyczne obejście to natychmiast wywoływana funkcja async:

(async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const user = await res.json();
  console.log(user.name);
})();

Na czym ludzie się potykają

Szybki przegląd typowych pułapek:

• Zapomniane async. Użycie await w zwykłej funkcji to błąd składni. Rozwiązanie: dodaj async albo wywołaj pomocniczą funkcję async przez .then.
• Brak await na wyniku. const data = getJSON(url); daje ci obietnicę, a nie dane. Jeśli użyjesz jej jak wartości, na wyjściu zobaczysz [object Promise].
• Nieobsłużone odrzucenia. Funkcja async wywołana bez czekania na wynik (doWork();) po cichu połknie błędy, chyba że dodasz .catch albo zrobisz na niej await wewnątrz try/catch.
• forEach z callbackami async. array.forEach(async (x) => await something(x)) na nic nie czeka: forEach ignoruje zwracane obietnice. Użyj for...of z await albo Promise.all(array.map(...)).

// Zepsute: forEach nie czeka na await.
async function zepsuta() {
  [1, 2, 3].forEach(async (n) => {
    await new Promise((r) => setTimeout(r, 100));
    console.log("gotowe", n);
  });
  console.log("koniec?");
}

// Naprawione: Promise.all + map.
async function naprawiona() {
  await Promise.all([1, 2, 3].map(async (n) => {
    await new Promise((r) => setTimeout(r, 100));
    console.log("gotowe", n);
  }));
  console.log("koniec!");
}

zepsuta();
naprawiona();

Uruchom to: "koniec?" pojawia się przed jakimkolwiek "gotowe", bo zepsuta kończy działanie bez czekania. naprawiona czeka na wszystko i wypisuje "koniec!" na samym końcu.

Kiedy sięgać po async/await

Domyślnie używaj async/await w każdym kodzie, który wykonuje po kolei więcej niż jeden krok asynchroniczny albo potrzebuje obsługi błędów w stylu try/catch. Przy zwykłych obietnicach zostań w przypadku trywialnych jednolinijkowców, kodu bibliotek, który zwraca obietnicę bez potrzeby czekania na cokolwiek, albo gdy naprawdę potrzebujesz kombinatorów takich jak Promise.race czy .finally() w łańcuchu.

Dobrze użyte async/await sprawia, że kod asynchroniczny czyta się jak przepis: zrób to, potem to, potem to. Event loop nadal robi swoje, a ty po prostu przestajesz myśleć callbackami.

Dalej: fetch API

Większość przykładów na tej stronie używała fetch jako zastępstwa dla "jakiejś operacji asynchronicznej". Warto przyjrzeć mu się porządnie: jak działają żądania i odpowiedzi, obsługa JSON, ustawianie nagłówków i dlaczego fetch nie odrzuca obietnicy przy błędach HTTP. To temat następnej strony.