Dlaczego wprowadzono konstrukcję async/await i jak poprawia ona pracę z kodem asynchronicznym?

Async/await został wprowadzony, aby uprościć pisanie kodu asynchronicznego, czyniąc go bardziej czytelnym i łatwiejszym w utrzymaniu w porównaniu z tradycyjnymi callbackami lub obietnicami.

Jak to poprawia:

1. Czytelność: Kod z async/await wygląda jak kod synchroniczny, linia po linii, co znacznie ułatwia jego zrozumienie.
2. Obsługa błędów: Pozwala na użycie standardowych konstrukcji takich jak try/catch do obsługi błędów w kodzie asynchronicznym, w przeciwieństwie do .catch() w obietnicach.
3. Debugowanie: Punkty przerwania (breakpoints) działają tak samo jak w kodzie synchronicznym, upraszczając proces debugowania.
4. Mniej "callback hell": Usuwa problem zagnieżdżonych callbacków, które prowadzą do nieczytelnego kodu.

Przykład:

Kod z obietnicami:

// Przykład z obietnicami
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Błąd podczas pobierania danych:', error);
  });

Ten sam kod z async/await:

// Przykład z async/await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Błąd podczas pobierania danych:', error);
  }
}

fetchData();

Konstrukcja async/await opiera się na obietnicach i jest cukrem składniowym do ich obsługi. Funkcja oznaczona jako async zawsze zwraca obietnicę. Operator await można używać tylko wewnątrz funkcji async i "czeka" na rozwiązanie obietnicy, zwracając jej rozwiązaną wartość lub generując wyjątek w przypadku błędu.