JavaScript: Zrozum async / await

Wprowadzenie

Pisanie asynchronicznego kodu w JavaScript może być trudne - szczególnie gdy opieramy się wyłącznie na callbackach lub obietnicach (Promises). Na szczęście język JavaScript oferuje konstrukcję async/await, która pozwala pisać kod asynchroniczny w sposób bardziej czytelny i zbliżony do synchronicznego.

Dowiesz się czym są async i await, jak działają pod spodem i jak ich używać poprawnie. Pokażę ci też typowe błędy oraz dobre praktyki.

Co to jest async / await?

async i await to składnia wprowadzona w ECMAScript 2017 (ES8), która ułatwia pracę z obietnicami (Promises).

async - oznacza, że funkcja zawsze zwraca obietnicę.

await - zatrzymuje wykonanie funkcji do momentu rozwiązania (lub odrzucenia) obietnicy.

function getData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Dane gotowe!"), 1000);
  });
}
 
async function showData() {
  const result = await getData();
  console.log(result);
}
 
showData();

Ten kod działa jakby był synchroniczny, mimo że wykonuje się asynchronicznie.

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

Jedną z największych zalet async/await jest to, że możemy obsługiwać błędy tak samo jak w kodzie synchronicznym - za pomocą try/catch.

Przykład:

async function fetchUser() {
  try {
    const response = await fetch("https://api.example.com/user");
    if (!response.ok) {
      throw new Error("Błąd sieci!");
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Wystąpił błąd:", error.message);
  }
}

Dzięki temu kod jest znacznie bardziej czytelny niż zagnieżdżone .then() i .catch().

Porównanie z .then()

Przed async/await, obietnice obsługiwało się głównie w ten sposób:

getData()
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error("Błąd:", error);
  });

Ten kod również działa, ale w bardziej złożonych przypadkach może prowadzić do tzw. “callback hell”, czyli trudnych do zrozumienia zagnieżdżeń.

async/await eliminuje ten problem, dzięki czemu kod wygląda bardziej jak zwykła procedura krok po kroku.

Wykonywanie wielu obietnic jednocześnie

Czasem chcemy wykonać kilka zapytań równolegle, a nie jedno po drugim. Wtedy nie należy czekać na każdą obietnicę osobno.

Niewydajne rozwiązanie:

const a = await getA();
const b = await getB(); // czeka na zakończenie getA()

Efektywne rozwiązanie:

const [a, b] = await Promise.all([getA(), getB()]);

To podejście uruchamia getA() i getB() równolegle i czeka aż obie się zakończą.

Dobre praktyki

• Unikaj blokowania: Nie używaj await poza funkcjami async, i nie blokuj niepotrzebnie kilku await z rzędu.

• Zawsze otaczaj await blokiem try/catch jeśli może wystąpić błąd.

• Stosuj Promise.all() dla niezależnych operacji asynchronicznych.

• Nie mieszaj stylów: Lepiej pisać cały kod w async/await niż mieszać z .then() - to zwiększa czytelność.

Podsumowanie

async/await to potężne narzędzie, które pozwala pisać czysty, czytelny kod asynchroniczny. Choć pod spodem wciąż używane są obietnice, składnia ta sprawia, że logika programu wygląda jak kod synchroniczny. Warto nauczyć się tej techniki i stosować ją w codziennej pracy z JavaScript.