jQuery Academy · Lektion

Mehrere asynchrone Aufgaben verarbeiten

Mehrere asynchrone Aufgaben verarbeiten ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Warum asynchrone Aufgaben koordinieren?

In der Webentwicklung sind viele Vorgänge asynchron. Das bedeutet, dass sie nicht sofort oder in einer strikt festgelegten Reihenfolge ablaufen. Denken Sie etwa an das Abrufen von Daten von einem Server, das Laden von Bildern oder das Ausführen von Animationen.

Wenn Ihre Anwendung mehrere dieser Aufgaben gleichzeitig oder in einer bestimmten Reihenfolge ausführen muss, benötigen Sie eine Möglichkeit, sie effektiv zu koordinieren. Diese Lektion zeigt Ihnen, wie das geht!

Die Herausforderung mehrerer Aufgaben

Stellen Sie sich vor, Sie müssen das Profil eines Benutzers und dessen neueste Benachrichtigungen laden. Beides sind separate Anfragen an den Server.

Woher wissen Sie, wann beide abgeschlossen sind?
Was passiert, wenn eine Anfrage fehlschlägt?
Was passiert, wenn eine Anfrage von der anderen abhängt (z. B. wenn Sie Benachrichtigungen für eine bestimmte Benutzer-ID abrufen müssen, die Sie im Profil finden)?

Ohne eine geeignete Koordination könnte Ihre Benutzeroberfläche unvollständige Daten anzeigen oder vollständig ausfallen.

`$.when()` für parallele Vorgänge

$.when() von jQuery ist ein leistungsfähiges Werkzeug zur Koordination mehrerer unabhängiger asynchroner Vorgänge. Die Funktion nimmt ein oder mehrere Deferred-/Promise-Objekte als Argumente entgegen.

$.when() gibt ein übergeordnetes Promise zurück, das aufgelöst wird, sobald alle übergebenen einzelnen Promises aufgelöst wurden. Wird eines davon abgelehnt, wird das übergeordnete Promise sofort abgelehnt.

Beispiel für `$.when()`: Paralleles Abrufen

Simulieren wir das parallele Abrufen zweier verschiedener Datensätze. Zur Demonstration verwenden wir $.Deferred(), um AJAX-Anfragen nachzuahmen.

Versuchen Sie, diesen Code auszuführen:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay) {
    let dfd = $.Deferred();
    setTimeout(function() {
      console.log(`Finished fetching ${name}`);
      dfd.resolve(`Data for ${name}`);
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500);
  let settingsPromise = fetchData("App Settings", 800);

  console.log("Starting parallel fetches...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully!");
      console.log(`Profile: ${profileData}`);
      console.log(`Settings: ${settingsData}`);
    });
});

Ergebnisse von `$.when()` verarbeiten

Wenn das $.when()-Promise aufgelöst wird, erhält sein .done()-Callback die aufgelösten Werte jedes ursprünglichen Promises als separate Argumente.

Wenn Sie N Promises an $.when() übergeben, erhält der .done()-Callback N Argumente.
Die Argumente stehen in derselben Reihenfolge, in der die Promises an $.when() übergeben wurden.

So können Sie einfach mit allen Ergebnissen arbeiten, sobald sie bereitstehen.

Fehlerbehandlung bei `$.when()`

Was passiert, wenn einer der parallelen Vorgänge fehlschlägt? Das übergeordnete Promise von $.when() wird sofort abgelehnt, wenn eines der einzelnen Promises abgelehnt wird.

Daraufhin wird der .fail()-Callback ausgelöst und erhält den Ablehnungsgrund des ersten fehlgeschlagenen Promises. Die übrigen parallelen Vorgänge werden weiterhin abgeschlossen, aber $.when() hat den Fehler bereits signalisiert.

Beispiel: `$.when()` mit Fehler

Ändern wir das vorherige Beispiel so, dass einer der Abrufe fehlschlägt. Beobachten Sie die Ausgabe:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay, shouldSucceed = true) {
    let dfd = $.Deferred();
    setTimeout(function() {
      if (shouldSucceed) {
        console.log(`Finished fetching ${name}`);
        dfd.resolve(`Data for ${name}`);
      } else {
        console.log(`Failed to fetch ${name}`);
        dfd.reject(`Error: ${name} could not be loaded`);
      }
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500, true);
  let settingsPromise = fetchData("App Settings", 800, false); // This one will fail

  console.log("Starting parallel fetches (one will fail)...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully! (This won't run)");
    })
    .fail(function(errorReason) {
      console.log("One or more operations failed!");
      console.log(`Reason: ${errorReason}`);
    });
});

Abhängige Aufgaben koordinieren

Manchmal sind Aufgaben nicht unabhängig. Möglicherweise müssen Sie:

Eine Benutzer-ID abrufen.
Anschließend diese ID verwenden, um die Details des Benutzers abzurufen.
Danach diese Details verwenden, um die Beiträge des Benutzers abzurufen.

Dies erfordert eine sequentielle Kette asynchroner Vorgänge, bei der jeder Schritt vom Erfolg und Ergebnis des vorherigen abhängt. Dies erreichen wir durch das Verketten von .then() oder .pipe().

Beispiel: Abhängige AJAX-Aufrufe verketten

So können Sie zwei simulierte AJAX-Aufrufe verketten, bei denen der zweite vom Ergebnis des ersten abhängt. Beachten Sie, wie der Rückgabewert des ersten .then() zur Eingabe für das nächste wird.

// Assume jQuery is loaded in the environment
$(function() {
  function fetchUserId() {
    let dfd = $.Deferred();
    setTimeout(() => {
      console.log("User ID fetched: 123");
      dfd.resolve(123);
    }, 500);
    return dfd.promise();
  }

  function fetchUserDetails(userId) {
    let dfd = $.Deferred();
    setTimeout(() => {
      if (userId === 123) {
        console.log(`Details fetched for user ${userId}`);
        dfd.resolve(`Details for User ${userId}`);
      } else {
        dfd.reject("Invalid User ID");
      }
    }, 700);
    return dfd.promise();
  }

  console.log("Starting dependent fetch chain...");

  fetchUserId()
    .then(function(id) {
      return fetchUserDetails(id); // Return a new promise
    })
    .done(function(details) {
      console.log("Full chain successful!");
      console.log(`Final Result: ${details}`);
    })
    .fail(function(error) {
      console.log("Chain failed:", error);
    });
});

Testen Sie Ihr Wissen

Stellen Sie sich vor, Sie möchten das Profil eines Benutzers und dessen Freundesliste laden. Die Anfrage für die Freundesliste benötigt die Benutzer-ID, die Bestandteil der Profildaten ist.

Welcher jQuery-Ansatz eignet sich am besten für diese spezielle Koordination?

Zusammenfassung: Asynchrone Koordination meistern

Sie haben gelernt, wie Sie mehrere asynchrone Aufgaben effektiv verarbeiten!

$.when(): Ideal, um unabhängige Aufgaben parallel auszuführen und darauf zu warten, dass alle abgeschlossen werden oder eine davon fehlschlägt.
Verketten mit .then(): Perfekt für abhängige Aufgaben, bei denen die Ausgabe eines Vorgangs für den nächsten benötigt wird.
Fehlerbehandlung: Sowohl $.when() als auch verkettete Promises stellen .fail() bereit, um Ablehnungen an jeder Stelle abzufangen und Ihre Anwendungen robuster zu machen.

Diese Muster sind entscheidend für dynamische und reaktionsfähige Webanwendungen mit jQuery.

Häufig gestellte Fragen

Ist die Lektion „Mehrere asynchrone Aufgaben verarbeiten“ kostenlos?

Ja — der vollständige Text von „Mehrere asynchrone Aufgaben verarbeiten“ 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 „Mehrere asynchrone Aufgaben verarbeiten“?

Beherrschen Sie die Koordination mehrerer unabhängiger oder voneinander abhängiger asynchroner Aufgaben und stellen Sie die korrekte Ausführungsreihenfolge sowie die Fehlerbehandlung für alle Vorgäng… 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 3 von 3.

Wie lange dauert die Lektion „Mehrere asynchrone Aufgaben verarbeiten“?

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

Deferred-Objekte verstehen
Promises verketten und kombinieren
Mehrere asynchrone Aufgaben verarbeiten

← Zurück zu jQuery Academy