Zrozumienie kodu synchronicznego i asynchronicznego w JavaScript

JavaScript wykonuje jedno zadanie naraz. Dzieje się tak dlatego, że jest to język jednowątkowy.

Aby budować szybkie aplikacje, musisz znać różnicę między kodem synchronicznym a asynchronicznym.

Wykonywanie synchroniczne

Kod jest wykonywany linia po linii. Każde zadanie czeka, aż poprzednie zostanie zakończone.

Wyobraź sobie kolejkę do bankomatu. Druga osoba nie może skorzystać z urządzenia, dopóki pierwsza nie skończy.

Jeśli jedno zadanie zajmuje dużo czasu, cały program zostaje wstrzymany. Nazywa się to blokowaniem (blocking).

Wykonywanie asynchroniczne

Zadania są wykonywane niezależnie. JavaScript rozpoczyna zadanie i natychmiast przechodzi do następnego.

Wyobraź sobie restaurację. Zamawiasz jedzenie, a następnie rozmawiasz ze znajomymi podczas oczekiwania. Nie siedzisz bezczynnie, czekając na posiłek, zanim zrobisz cokolwiek innego.

Kod asynchroniczny zapobiega zawieszaniu się aplikacji podczas:

  • żądań API
  • zapytań do bazy danych
  • odczytu plików
  • przesyłania obrazów

Trzy sposoby obsługi kodu asynchronicznego:

  1. Callbacks Funkcja jest uruchamiana po zakończeniu konkretnego zadania. To jak kurier, który dzwoni do Ciebie, gdy jedzenie dotrze na miejsce.

  2. Promises Promise reprezentuje przyszły wynik. Pozostaje w stanie oczekiwania (pending), dopóki nie zostanie rozwiązany (resolved – sukces) lub odrzucony (rejected – błąd).

  3. Async/Await Sprawia, że kod asynchroniczny wygląda jak kod synchroniczny. Jest łatwy do odczytania. Używasz await, aby wstrzymać funkcję bez blokowania reszty programu.

Jak to działa „pod maską”:

JavaScript używa Event Loop do zarządzania tymi zadaniami.

  • Call Stack: Śledzi aktualnie wykonywane funkcje.
  • Web APIs: Obsługuje długotrwałe zadania, takie jak timery czy zapytania fetch.
  • Callback Queue: Przechowuje zakończone zadania.
  • Event Loop: Przenosi zadania z kolejki do stosu, gdy stos jest pusty.

Porównanie:

Synchroniczne:

  • Wykonywane sekwencyjnie
  • Blokuje program
  • Proste w pisaniu
  • Wolne przy ciężkich zadaniach

Asynchroniczne:

  • Wykonywane niezależnie
  • Nieblokujące
  • Bardziej złożone
  • Wydajne w aplikacjach webowych

Opanowanie tych koncepcji jest kluczem do korzystania z React, Node.js i nowoczesnych API.

Źródło: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Źródło: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Pełny post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea