AJAX-Fehler und -Erfolge verarbeiten

Wenn Sie eine AJAX-Anfrage stellen, handelt es sich um eine asynchrone Operation. Das bedeutet, dass Ihr Code nicht auf die Antwort des Servers wartet, sondern mit der Ausführung anderer Aufgaben fortfährt.

Um die Antwort des Servers (oder deren Ausbleiben) zu verarbeiten, stellt jQuery spezielle Methoden bereit, die als Callbacks bezeichnet werden. Diese Funktionen werden nur ausgeführt, wenn bestimmte Ereignisse eintreten, beispielsweise ein Erfolg oder ein Fehler.

Der .done()-Callback ist die erste Wahl, um erfolgreiche AJAX-Anfragen zu verarbeiten. Er wird ausgeführt, wenn der Server mit einem Statuscode antwortet, der Erfolg signalisiert (typischerweise 200–299).

• Er erhält die vom Server zurückgegebenen Daten.
• Er eignet sich ideal, um Ihre Benutzeroberfläche mit aktuellen Informationen zu aktualisieren.

Rufen wir einige Daten ab und zeigen sie an, wenn die Anfrage erfolgreich war. Beachten Sie, wie .done() an den Aufruf von $.ajax() angehängt wird.

Doch was passiert, wenn der Server Ihre Anfrage nicht erfüllen kann? Hier kommt der .fail()-Callback zum Einsatz. Er wird ausgeführt, wenn bei der AJAX-Anfrage ein Fehler auftritt, beispielsweise 404 (Nicht gefunden) oder 500 (Serverfehler).

• Er hilft Ihnen dabei, den Benutzer zu informieren oder Probleme zu protokollieren.
• Er erhält Details zum Fehler.

Versuchen wir, Daten von einer nicht vorhandenen URL abzurufen. Der .fail()-Callback fängt den Fehler ab und protokolliert seine Details.

Der .fail()-Callback stellt drei nützliche Parameter bereit, die Ihnen helfen, die Fehlerursache zu verstehen:

• jqXHR: Das jQuery-XMLHttpRequest-Objekt mit detaillierten Informationen auf niedriger Ebene.
• textStatus: Eine Zeichenfolge, die den Fehlertyp beschreibt (z. B. "timeout", "error", "abort").
• errorThrown: Der HTTP-Statustext (z. B. "Not Found" bei einem 404-Fehler).

Verwenden Sie diese Informationen, um Ihren Benutzern gezieltes Feedback zu geben.

Manchmal müssen Sie eine Aktion unabhängig davon ausführen, ob die AJAX-Anfrage erfolgreich war oder fehlgeschlagen ist. Dafür ist der .always()-Callback zuständig.

• Er wird immer nach entweder .done() oder .fail() ausgeführt.
• Er eignet sich hervorragend für Aufräumarbeiten, beispielsweise zum Ausblenden eines Ladeindikators oder zum erneuten Aktivieren einer Schaltfläche.

Fügen wir unserem vorherigen Beispiel .always() hinzu. Wir simulieren einen Ladezustand und stellen sicher, dass dieser entfernt wird, unabhängig davon, ob die Anfrage erfolgreich ist oder fehlschlägt.

Die AJAX-Methoden von jQuery geben ein Promise-ähnliches Objekt zurück. Dadurch können Sie die Methoden .done(), .fail() und .always() direkt verketten.

Durch diese Verkettung wird Ihr Code übersichtlicher und leichter lesbar, da die Blöcke für Erfolg, Fehler und abschließende Aktionen klar voneinander getrennt sind.

Betrachten Sie die folgende jQuery-AJAX-Anfrage:

$.ajax({
  url: "/api/data",
  method: "GET"
})
.done(function() {
  console.log("A");
})
.fail(function() {
  console.log("B");
})
.always(function() {
  console.log("C");
});

Wenn der Server mit einem Fehler 404 Not Found antwortet, was wird in der Konsole ausgegeben?

Sie beherrschen nun die wichtigsten Callbacks für eine robuste AJAX-Verarbeitung:

• .done(): Für erfolgreiche Antworten.
• .fail(): Zur Verarbeitung von Fehlern.
• .always(): Für Aktionen, die unabhängig vom Ergebnis ausgeführt werden sollen.

Mit diesen Methoden können Ihre Anwendungen Netzwerkinteraktionen zuverlässig verarbeiten und Benutzern auch dann eine bessere Erfahrung bieten, wenn nicht alles wie geplant läuft.