0Pricing
jQuery Academy · Lektion

Deferred-Objekte verstehen

Erfassen Sie die grundlegenden Konzepte der Deferred-Objekte von jQuery, wie sie asynchrone Vorgänge darstellen und welche Zustände sie haben (pending, resolved, rejected).

Deferred-Objekte verstehen ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Asynchrone Vorgänge und Callbacks

In der Webentwicklung laufen viele Aufgaben nicht sofort ab. Denken Sie etwa daran, Daten von einem Server abzurufen oder auf den Klick eines Benutzers zu warten. Das sind asynchrone Vorgänge.

Traditionell würden wir Callbacks verwenden: Funktionen, die erst ausgeführt werden, nachdem eine asynchrone Aufgabe abgeschlossen ist. Verschachtelte Callbacks können jedoch zum „Callback Hell“ führen und den Code schwer lesbar und wartbar machen.

Lernen Sie jQuery Deferred kennen

Hier kommen jQuerys Deferred-Objekte zur Hilfe! Ein Deferred-Objekt ist eine leistungsfähige Möglichkeit, asynchrone Vorgänge sauberer zu verwalten.

Es dient als Platzhalter für ein zukünftiges Ergebnis. Sie können ihm Funktionen zuweisen, die ausgeführt werden, sobald der Vorgang abgeschlossen ist – unabhängig davon, ob er erfolgreich war oder fehlgeschlagen ist –, ohne den Hauptcode zu blockieren.

Die drei Zustände eines Deferred-Objekts

Ein Deferred-Objekt kann sich in einem von drei Zuständen befinden, die den Status des dargestellten asynchronen Vorgangs widerspiegeln:

  • Ausstehend: Der Ausgangszustand. Der Vorgang ist noch nicht abgeschlossen.
  • Erfüllt: Der Vorgang wurde erfolgreich abgeschlossen.
  • Abgelehnt: Der Vorgang ist fehlgeschlagen oder es ist ein Fehler aufgetreten.

Sobald der Zustand eines Deferred-Objekts erfüllt oder abgelehnt ist, kann er nicht mehr geändert werden.

Ein Deferred-Objekt erstellen

Sie erstellen ein neues Deferred-Objekt mit $.Deferred(). Dieses Objekt befindet sich zunächst im Zustand pending.

Es stellt Methoden bereit, um seinen Zustand zu ändern und Callback-Funktionen zu registrieren, die bei einer Zustandsänderung ausgeführt werden.

Versuchen Sie, eines zu erstellen:

var myDeferred = $.Deferred();
console.log('Deferred is pending: ' + (myDeferred.state() === 'pending'));

Erfolg signalisieren: .resolve()

Wenn Ihr asynchroner Vorgang erfolgreich abgeschlossen wurde, rufen Sie die Methode .resolve() für Ihr Deferred-Objekt auf.

Dadurch ändert sich sein Zustand von pending zu resolved. Alle Argumente, die Sie an .resolve() übergeben, werden an die Erfolgs-Callbacks weitergegeben.

Beobachten Sie die Zustandsänderung:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.resolve('Data fetched!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

Fehlschlag signalisieren: .reject()

Wenn Ihr asynchroner Vorgang fehlschlägt, rufen Sie die Methode .reject() auf.

Dadurch ändert sich der Zustand des Deferred-Objekts von pending zu rejected. An .reject() übergebene Argumente werden an die Fehler-Callbacks weitergegeben, häufig als Fehlermeldungen.

Sehen Sie sich an, wie die Ablehnung funktioniert:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.reject('Network error!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

Erfolg mit .done() verarbeiten

Um auf einen erfolgreichen Vorgang zu reagieren (wenn das Deferred-Objekt den Zustand resolved hat), weisen Sie ihm mit der Methode .done() eine Callback-Funktion zu.

Diese Funktion wird nur ausgeführt, wenn .resolve() aufgerufen wird, und erhält alle von .resolve() übergebenen Argumente.

Verarbeiten wir einige Daten:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = true; // Simulate success
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().done(function(message) {
  console.log('Success handler: ' + message);
});

Fehler mit .fail() verarbeiten

Umgekehrt verwenden Sie die Methode .fail(), um Fehler zu behandeln (wenn das Deferred-Objekt den Zustand rejected hat).

Die an .fail() übergebene Callback-Funktion wird nur ausgeführt, wenn .reject() aufgerufen wird, und erhält dessen Argumente.

Simulieren wir einen Fehler:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = false; // Simulate failure
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().fail(function(errorMessage) {
  console.log('Error handler: ' + errorMessage);
});

Immer ausführen: .always()

Manchmal muss Code unabhängig davon ausgeführt werden, ob der asynchrone Vorgang erfolgreich war oder fehlgeschlagen ist. Genau dafür gibt es .always().

Die mit .always() verknüpfte Callback-Funktion wird sowohl bei einem resolved als auch bei einem rejected Deferred-Objekt ausgeführt.

Verwenden Sie .always() für Aufräumarbeiten oder abschließende Aktualisierungen der Benutzeroberfläche:

var fetchData = function(shouldSucceed) {
  var dfd = $.Deferred();
  setTimeout(function() {
    if (shouldSucceed) {
      dfd.resolve('Data received!');
    } else {
      dfd.reject('Request failed!');
    }
  }, 1000);
  return dfd;
};

fetchData(false)
  .done(function(msg) { console.log('Success: ' + msg); })
  .fail(function(err) { console.log('Failure: ' + err); })
  .always(function() { console.log('Operation finished.'); });

Mit .promise() schützen

Wenn Sie ein Deferred-Objekt aus einer Funktion zurückgeben, möchten Sie möglicherweise verhindern, dass externer Code seinen Zustand ändern kann (z. B. indem er direkt .resolve() oder .reject() aufruft).

Die Methode .promise() gibt eine „schreibgeschützte“ Version des Deferred-Objekts zurück. Sie stellt nur Methoden zum Verknüpfen von Callbacks bereit (z. B. .done(), .fail() und .always()), nicht jedoch zum Ändern seines Zustands.

var createAsyncTask = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve('Task done!');
  }, 500);
  // Return only the promise, not the full Deferred object
  return dfd.promise();
};

var taskPromise = createAsyncTask();
taskPromise.done(function(msg) {
  console.log(msg);
});

// The following would throw an error or do nothing if trying to resolve/reject a promise
// taskPromise.resolve('Attempted to resolve externally'); // This is not possible on a promise object

Testen Sie Ihr Wissen

Welche der folgenden Methoden würden Sie verwenden, um einen Callback zu registrieren, der NUR ausgeführt wird, wenn ein Deferred-Objekt seinen asynchronen Vorgang erfolgreich abschließt?

Zusammenfassung: Grundlagen von Deferred

Sehr gut! In dieser Lektion haben Sie die grundlegenden Konzepte von jQuery-Deferred-Objekten verstanden:

  • Sie verwalten asynchrone Vorgänge und vermeiden Callback-Hell.
  • Sie befinden sich in den Zuständen ausstehend, erfolgreich aufgelöst oder abgelehnt.
  • Für Erfolg verwenden Sie .resolve() und für Fehler .reject().
  • Callbacks werden mit .done() (Erfolg), .fail() (Fehler) und .always() (beides) registriert.
  • .promise() gibt ein schreibgeschütztes Objekt zurück, um Änderungen am Zustand zu verhindern.

Als Nächstes lernen Sie, wie Sie diese leistungsfähigen Objekte verketten und kombinieren!

Häufig gestellte Fragen

Ist die Lektion „Deferred-Objekte verstehen“ kostenlos?

Ja — der vollständige Text von „Deferred-Objekte verstehen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Deferred-Objekte verstehen“?

Erfassen Sie die grundlegenden Konzepte der Deferred-Objekte von jQuery, wie sie asynchrone Vorgänge darstellen und welche Zustände sie haben (pending, resolved, rejected). Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um jQuery Academy zu starten?

Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.

Wie lange dauert die Lektion „Deferred-Objekte verstehen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?

Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Deferred-Objekte verstehen
  2. Promises verketten und kombinieren
  3. Mehrere asynchrone Aufgaben verarbeiten
← Zurück zu jQuery Academy