Wie arbeiten Sie mit asynchronem JavaScript?

Ich arbeite mit Asynchronität in JavaScript unter Verwendung von Callbacks, Promises und async/await.

Callbacks sind Funktionen, die an andere Funktionen als Argumente übergeben werden und nach Abschluss einer Operation ausgeführt werden. Sie können zu "Höllen der Callbacks" führen, wenn sie verschachtelt sind.

// Beispiel für einen Callback
function fetchData(callback) {
  setTimeout(() => {
    callback("Daten empfangen");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Gibt "Daten empfangen" nach 1 Sekunde aus
});

Promises sind Objekte, die die endgültige Beendigung oder das Scheitern einer asynchronen Operation darstellen. Sie erleichtern die Arbeit mit asynchronem Code, vermeiden tiefe Verschachtelungen. Sie haben drei Zustände: pending (ausstehend), fulfilled (erfolgreich), rejected (abgelehnt).

// Beispiel für eine Promise
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Daten empfangen");
    }, 1000);
  });
}

fetchDataPromise()
  .then((data) => {
    console.log(data); // Gibt "Daten empfangen" nach 1 Sekunde aus
  })
  .catch((error) => {
    console.error("Fehler:", error);
  });

Async/await ist syntaktischer Zucker für Promises, der asynchronen Code lesbarer macht, ähnlich wie synchroner Code. Eine mit async markierte Funktion gibt immer ein Promise zurück. Der Operator await kann nur innerhalb von async Funktionen verwendet werden und pausiert die Ausführung, bis das Promise erfüllt oder abgelehnt wird.

// Beispiel für async/await
async function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Daten empfangen");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Gibt "Daten empfangen" nach 1 Sekunde aus
  } catch (error) {
    console.error("Fehler:", error);
  }
}

processData();

Ich verwende häufig async/await bei API-Anfragen, da es die bequemste und lesbarste Methode ist, asynchrone Operationen zu handhaben. Für parallele Ausführung mehrerer asynchroner Operationen nutze ich Promise.all() oder Promise.allSettled().

Ich nutze die Event Loop, um die Ausführungsreihenfolge von asynchronem Code, Microtasks und Macrotasks zu verstehen.