JavaScript Promises i Async/Await Wyjaśnione

Wyobraź sobie, że zamawiasz pizzę online.

Nie stoisz bezczynnie pod drzwiami, czekając, aż przyjedzie. Oglądasz filmy, pracujesz lub rozmawiasz ze znajomymi. Gdy pizza przyjeżdża, jesz.

JavaScript działa w podobny sposób.

Zadania takie jak zapytania API czy wywołania bazy danych wymagają czasu. Gdyby JavaScript czekał na każde zadanie, Twoja aplikacja by się zawiesiła. Zamiast tego, kontynuuje wykonywanie innego kodu podczas oczekiwania.

Promise reprezentuje wartość, która pojawi się w przyszłości.

Promise ma trzy stany:

Rzadko widzisz kod używany do tworzenia nowego Promise. Dzieje się tak dlatego, że nowoczesne narzędzia, takie jak fetch(), już zwracają dla Ciebie Promise.

Co robi .then()?

Wiele osób myśli, że .then() pobiera dane. Tak nie jest.

.then() rejestruje funkcję callback. Mówisz JavaScript: „Gdy ten Promise zostanie zakończony, wykonaj tę funkcję”.

To jak aplikacja do zamawiania jedzenia. Zamawiasz posiłek, a aplikacja mówi: „Zadzwoń do mnie, gdy jedzenie dotrze”. Funkcja czeka na wynik.

Dlaczego warto używać Async/Await?

Możesz łączyć wywołania .then(), aby najpierw pobrać dane użytkownika, potem posty, a następnie komentarze. To działa, ale długie łańcuchy są trudne do odczytania.

Async/await sprawia, że kod wygląda jak zwykły, krok po kroku wykonywany kod. Jest czystszy i łatwiejszy do zrozumienia.

Czy await blokuje JavaScript?

To częste pytanie rekrutacyjne. Odpowiedź brzmi: nie.

Gdy JavaScript napotka słowo kluczowe await, wstrzymuje tylko tę konkretną funkcję async. Reszta Twojej aplikacji działa dalej.

Przykładowy przepływ:

  1. Wykonaj kod w funkcji async.
  2. Napotkaj await i wstrzymaj tę funkcję.
  3. Wykonaj resztę aplikacji.
  4. Gdy zadanie zostanie zakończone, wznowij funkcję async.

Async/await to po prostu czystszy sposób na pisanie Promise. To tzw. cukier składniowy (syntactic sugar).

Kluczowe wnioski:

Źródło: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm