jQuery Academy · Lekcja

Obsługa wielu zadań asynchronicznych

Proszę opanować koordynowanie kilku niezależnych lub zależnych zadań asynchronicznych, zapewniając właściwą kolejność wykonywania i obsługę błędów we wszystkich operacjach.

Obsługa wielu zadań asynchronicznych to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Dlaczego koordynować zadania asynchroniczne?

W tworzeniu aplikacji internetowych wiele operacji jest asynchronicznych. Oznacza to, że nie zachodzą natychmiast ani w ściśle określonej kolejności. Przykładami są pobieranie danych z serwera, ładowanie obrazów lub uruchamianie animacji.

Gdy aplikacja musi wykonywać wiele takich zadań jednocześnie albo w określonej kolejności, potrzebny jest sposób na ich skuteczną koordynację. W tej lekcji pokażemy, jak to robić!

Wyzwanie związane z wieloma zadaniami

Proszę wyobrazić sobie, że trzeba załadować profil użytkownika oraz jego najnowsze powiadomienia. Są to dwa niezależne żądania do serwera.

Skąd wiadomo, kiedy oba żądania zostaną zakończone?
Co się stanie, jeśli jedno z nich się nie powiedzie?
Co się stanie, jeśli jedno zależy od drugiego (np. trzeba pobrać powiadomienia dla konkretnego identyfikatora użytkownika znalezionego w profilu)?

Bez odpowiedniej koordynacji interfejs użytkownika może wyświetlać niepełne dane albo całkowicie przestać działać.

Wprowadzenie do `$.when()` dla operacji równoległych

jQuery's $.when() to zaawansowane narzędzie do koordynowania wielu niezależnych operacji asynchronicznych. Przyjmuje jako argumenty jeden lub więcej obiektów Deferred/Promise.

$.when() zwraca nadrzędny Promise, który zostanie spełniony, gdy spełnią się wszystkie przekazane do niego obiekty Promise. Jeśli którykolwiek z nich zostanie odrzucony, nadrzędny Promise zostanie natychmiast odrzucony.

Przykład `$.when()`: równoległe pobieranie

Przeanalizujmy symulację równoległego pobierania dwóch różnych zestawów danych. Użyjemy $.Deferred(), aby na potrzeby demonstracji naśladować żądania AJAX.

Proszę uruchomić ten kod:

// 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}`);
    });
});

Obsługa wyników `$.when()`

Gdy Promise zwrócony przez $.when() zostanie spełniony, jego callback .done() otrzyma spełnione wartości każdego z pierwotnych obiektów Promise jako osobne argumenty.

Jeśli do $.when() zostanie przekazanych N obiektów Promise, callback .done() otrzyma N argumentów.
Argumenty występują w tej samej kolejności, w jakiej obiekty Promise przekazano do $.when().

Ułatwia to pracę ze wszystkimi wynikami, gdy są już gotowe.

Obsługa błędów w `$.when()`

Co się stanie, jeśli jedna z równoległych operacji zakończy się niepowodzeniem? Nadrzędny Promise funkcji $.when() zostanie natychmiast odrzucony, jeśli którykolwiek z poszczególnych obiektów Promise zostanie odrzucony.

Callback .fail() zostanie wtedy wywołany i otrzyma przyczynę odrzucenia z pierwszego obiektu Promise, który zakończył się niepowodzeniem. Pozostałe operacje równoległe będą nadal wykonywane, ale $.when() zdąży już zasygnalizować niepowodzenie.

Przykład: `$.when()` z niepowodzeniem

Zmodyfikujmy poprzedni przykład tak, aby jedno z pobrań zakończyło się niepowodzeniem. Proszę obserwować wynik:

// 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}`);
    });
});

Koordynowanie zależnych zadań

Czasami zadania nie są niezależne. Może być konieczne:

Pobranie identyfikatora użytkownika.
Następnie użycie tego identyfikatora do pobrania danych użytkownika.
Następnie użycie tych danych do pobrania postów tego użytkownika.

Wymaga to sekwencyjnego łańcucha operacji asynchronicznych, w którym każdy krok zależy od powodzenia i wyniku poprzedniego. Osiąga się to przez łączenie metod .then() lub .pipe().

Przykład: łączenie zależnych żądań AJAX

Oto sposób na połączenie dwóch symulowanych wywołań AJAX, w którym drugie zależy od wyniku pierwszego. Proszę zauważyć, jak wartość zwrócona przez pierwsze .then() staje się danymi wejściowymi dla następnego.

// 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);
    });
});

Sprawdź swoją wiedzę

Proszę rozważyć sytuację, w której chcą Państwo załadować profil użytkownika i listę jego znajomych. Żądanie listy znajomych wymaga identyfikatora użytkownika, który znajduje się w danych profilu.

Które podejście jQuery najlepiej nadaje się do takiej koordynacji?

Podsumowanie: opanowanie koordynacji asynchronicznej

Nauczyli się Państwo skutecznie obsługiwać wiele zadań asynchronicznych!

$.when(): idealne rozwiązanie do równoległego wykonywania niezależnych zadań i oczekiwania na zakończenie wszystkich z nich lub na niepowodzenie któregokolwiek.
Łączenie za pomocą .then(): doskonałe rozwiązanie dla zależnych zadań, gdy wynik jednej operacji jest potrzebny w następnej.
Obsługa błędów: zarówno $.when(), jak i łączone obiekty Promise udostępniają .fail() do przechwytywania odrzuceń w dowolnym miejscu, dzięki czemu aplikacje są bardziej niezawodne.

Wzorce te mają kluczowe znaczenie przy tworzeniu dynamicznych i responsywnych aplikacji internetowych z użyciem jQuery.

Często zadawane pytania

Czy lekcja „Obsługa wielu zadań asynchronicznych” jest bezpłatna?

Tak — pełny tekst „Obsługa wielu zadań asynchronicznych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Obsługa wielu zadań asynchronicznych”?

Proszę opanować koordynowanie kilku niezależnych lub zależnych zadań asynchronicznych, zapewniając właściwą kolejność wykonywania i obsługę błędów we wszystkich operacjach. Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?

Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.

Ile czasu zajmuje lekcja „Obsługa wielu zadań asynchronicznych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?

Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do jQuery Academy