Jak pracujesz z asynchronicznym JavaScript?

Pracuję z asynchronicznością w JavaScript, korzystając z callbacków, obietnic (promises) i async/await.

Callbacki to funkcje przekazywane do innych funkcji jako argumenty i wykonywane po zakończeniu operacji. Mogą prowadzić do "piekła callbacków" przy zagnieżdżaniu.

// Przykład callbacku
function fetchData(callback) {
  setTimeout(() => {
    callback("Dane odebrane");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Wyświetli "Dane odebrane" po 1 sekundzie
});

Obietnice (promises) to obiekty reprezentujące końcowe zakończenie lub niepowodzenie operacji asynchronicznej. Ułatwiają pracę z kodem asynchronicznym, unikając głębokiego zagnieżdżania. Mają trzy stany: pending (oczekujące), fulfilled (zakończone pomyślnie), rejected (odrzucone).

// Przykład obietnicy
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Dane odebrane");
    }, 1000);
  });
}

fetchDataPromise()
  .then((data) => {
    console.log(data); // Wyświetli "Dane odebrane" po 1 sekundzie
  })
  .catch((error) => {
    console.error("Błąd:", error);
  });

Async/await to składniowy cukier nad obietnicami, który czyni kod asynchroniczny bardziej czytelnym, podobnym do synchronicznego. Funkcja oznaczona async zawsze zwraca obietnicę. Operator await może być używany tylko wewnątrz funkcji async i zatrzymuje wykonanie do czasu rozwiązania lub odrzucenia obietnicy.

// Przykład async/await
async function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Dane odebrane");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Wyświetli "Dane odebrane" po 1 sekundzie
  } catch (error) {
    console.error("Błąd:", error);
  }
}

processData();

Często używam async/await podczas pracy z zapytaniami API, ponieważ jest to najwygodniejszy i najbardziej czytelny sposób obsługi operacji asynchronicznych. Do równoległego wykonywania kilku operacji asynchronicznych używam Promise.all() lub Promise.allSettled().

Używam pętli zdarzeń (event loop), aby zrozumieć kolejność wykonywania kodu asynchronicznego, mikro-zadań i makro-zadań.