Was ist ein Callback?

In JavaScript werden Callbacks häufig verwendet, um asynchrone Aufgaben zu verarbeiten, wie zum Beispiel das Abrufen von Daten aus einer API, das Lesen von Dateien oder das Warten auf Benutzereingaben.

Callbacks bilden die Grundlage der asynchronen Programmierung in JavaScript, da sie es dem Programm ermöglichen, Aufgaben zu bearbeiten, die Zeit benötigen, ohne die Ausführung des restlichen Codes zu blockieren.

Funktionsweise von Callbacks in der asynchronen Programmierung

Bei einer asynchronen Operation wird eine Callback-Funktion ausgeführt, sobald die Operation abgeschlossen ist. Dadurch kann der Rest des Programms fortgesetzt werden, während auf den Abschluss der Aufgabe gewartet wird.

• fetchData: Simuliert eine asynchrone Operation (wie das Abrufen von Daten), die 2 Sekunden dauert. Die Callback-Funktion wird aufgerufen, sobald die Daten verfügbar sind;
• displayData: Die Callback-Funktion, die an fetchData übergeben wird. Sie wird mit den abgerufenen Daten aufgerufen, sobald die Operation abgeschlossen ist;
• Der restliche Code wird weiterhin ausgeführt, während die Daten abgerufen werden, und wenn die Daten bereit sind, wird der Callback ausgelöst, um sie zu verarbeiten.

Probleme mit Callbacks: Callback-Hölle und Verschachtelung

Obwohl Callbacks leistungsfähig sind, können sie schnell zu Problemen führen, wenn viele asynchrone Operationen voneinander abhängen. Dies führt häufig zur „Callback-Hölle“, bei der Callbacks tief verschachtelt sind und der Code schwer lesbar und wartbar wird.

getUser(1, user => {
  console.log('User fetched:', user);

  getOrders(user.id, orders => {
    console.log('Orders fetched:', orders);

    getOrderDetails(orders[0].id, orderDetails => {
      console.log('Order details fetched:', orderDetails);

      getShippingStatus(orderDetails.shippingId, status => {
        console.log('Shipping status fetched:', status);
      });
    });
  });
});

Dieses Beispiel veranschaulicht das Problem des Callback-Hell, das auftritt, wenn mehrere asynchrone Operationen voneinander abhängig sind und zu tief verschachtelten Callbacks führen. Hier hängt jede Funktion (getUser, getOrders, getOrderDetails, getShippingStatus) vom Ergebnis der vorherigen ab, was zu einer verschachtelten Struktur führt, die schwer zu lesen, zu warten und zu debuggen ist. Dieser Ansatz erschwert die Fehlerbehandlung, die Steuerung des Ablaufs und zukünftige Änderungen, wodurch der Code mit zunehmender Anzahl von Callbacks unübersichtlich wird.

Refaktorisierung von Callbacks für übersichtlicheren Code

Um Callback-Hell zu vermeiden und die Lesbarkeit sowie Wartbarkeit des Codes zu verbessern, gibt es einige Strategien zur Refaktorisierung von Callbacks:

Benannte Funktionen: Anstatt anonyme Callback-Funktionen zu verwenden, sollten benannte Funktionen erstellt werden, die wiederverwendbar sind und den Code besser strukturieren.

function getUserCallback(user) {
  console.log('User fetched:', user);
  getOrders(user.id, getOrdersCallback);
}

function getOrdersCallback(orders) {
  console.log('Orders fetched:', orders);
  getOrderDetails(orders[0].id, getOrderDetailsCallback);
}

function getOrderDetailsCallback(orderDetails) {
  console.log('Order details fetched:', orderDetails);
  getShippingStatus(orderDetails.shippingId, getShippingStatusCallback);
}

function getShippingStatusCallback(status) {
  console.log('Shipping status fetched:', status);
}

getUser(1, getUserCallback);

Durch die Verwendung benannter Funktionen wird der Ablauf des Codes klarer. Er ist leichter zu verstehen, zu warten und zu debuggen als tief verschachtelte anonyme Callbacks.

Logik aufschlüsseln: Komplexe Aufgaben in kleinere Funktionen unterteilen. Jede Funktion sollte eine spezifische Operation ausführen und die nächste Operation aufrufen. Dies reduziert Verschachtelungen und macht den Code modularer.

Promises (werden in späteren Kapiteln behandelt): Promises sind eine moderne Alternative zu Callbacks und bieten eine übersichtlichere, besser lesbare Möglichkeit, asynchrone Operationen zu handhaben. Promises helfen, das sogenannte Callback-Hell zu vermeiden, indem .then()-Methoden verkettet werden.