0Pricing
jQuery Academy · Lekcja

Poznawanie obiektów Deferred

Proszę poznać podstawowe pojęcia dotyczące obiektów Deferred jQuery, dowiedzieć się, jak reprezentują operacje asynchroniczne, oraz poznać ich stany (pending, resolved, rejected).

Poznawanie obiektów Deferred to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 1 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.

Operacje asynchroniczne i callbacki

W tworzeniu aplikacji internetowych wiele zadań nie odbywa się natychmiast. Pomyślmy o pobieraniu danych z serwera lub oczekiwaniu na kliknięcie użytkownika. Są to operacje asynchroniczne.

Tradycyjnie używalibyśmy callbacków — funkcji uruchamianych dopiero po zakończeniu zadania asynchronicznego. Zagnieżdżone callbacki mogą jednak prowadzić do „piekła callbacków”, przez co kod staje się trudny do odczytania i utrzymania.

Poznajemy Deferred w jQuery

W tym miejscu z pomocą przychodzą obiekty Deferred biblioteki jQuery! Obiekt Deferred to wygodny i zaawansowany sposób na czytelniejsze zarządzanie operacjami asynchronicznymi.

Działa jak symbol zastępczy przyszłego wyniku. Można do niego dołączyć funkcje, które zostaną uruchomione po zakończeniu operacji — niezależnie od tego, czy zakończy się ona powodzeniem, czy błędem — bez blokowania głównego kodu.

Trzy stany obiektu Deferred

Obiekt Deferred może znajdować się w jednym z trzech stanów, odzwierciedlających status reprezentowanego zadania asynchronicznego:

  • Oczekujący: Stan początkowy. Operacja nie została jeszcze zakończona.
  • Rozwiązany: Operacja zakończyła się pomyślnie.
  • Odrzucony: Operacja nie powiodła się lub wystąpił w niej błąd.

Po rozwiązaniu lub odrzuceniu stan obiektu Deferred nie może już ulec zmianie.

Tworzenie obiektu Deferred

Nowy obiekt Deferred tworzy się za pomocą $.Deferred(). Obiekt ten rozpoczyna działanie w stanie pending.

Udostępnia metody zmiany stanu oraz rejestrowania funkcji callback, które zostaną wykonane po zmianie stanu.

Spróbujmy go utworzyć:

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

Sygnalizowanie powodzenia: .resolve()

Po pomyślnym zakończeniu operacji asynchronicznej należy wywołać metodę .resolve() na obiekcie Deferred.

Zmienia to jego stan z pending na resolved. Wszystkie argumenty przekazane do .resolve() zostaną przekazane callbackom powodzenia.

Obserwujmy zmianę stanu:

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

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

Sygnalizowanie niepowodzenia: .reject()

Jeśli operacja asynchroniczna zakończy się niepowodzeniem, należy wywołać metodę .reject().

Zmienia to stan obiektu Deferred z pending na rejected. Argumenty przekazane do .reject() zostaną wysłane do callbacków obsługujących niepowodzenie, często jako komunikaty o błędach.

Zobaczmy, jak działa odrzucenie:

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

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

Obsługa powodzenia za pomocą .done()

Aby zareagować na pomyślne wykonanie operacji (gdy obiekt Deferred ma stan resolved), należy dołączyć funkcję callback za pomocą metody .done().

Funkcja ta zostanie wykonana tylko wtedy, gdy wywołano .resolve(), i otrzyma wszystkie argumenty przekazane do .resolve().

Przetwórzmy pewne dane:

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

Obsługa niepowodzenia za pomocą .fail()

Podobnie, do obsługi błędów (gdy obiekt Deferred ma stan rejected) służy metoda .fail().

Funkcja callback przekazana do .fail() zostanie wykonana tylko wtedy, gdy wywołano .reject(), i otrzyma jego argumenty.

Symulujmy błąd:

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

Uruchamianie zawsze: .always()

Czasami kod musi zostać wykonany niezależnie od tego, czy operacja asynchroniczna zakończyła się powodzeniem, czy niepowodzeniem. Właśnie do tego służy .always().

Funkcja callback dołączona za pomocą .always() zostanie wykonana zarówno wtedy, gdy obiekt Deferred ma stan resolved, jak i wtedy, gdy ma stan rejected.

Używaj .always() do sprzątania lub końcowych aktualizacji interfejsu:

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.'); });

Ochrona za pomocą .promise()

Gdy zwracasz obiekt Deferred z funkcji, możesz nie chcieć, aby zewnętrzny kod mógł zmieniać jego stan (np. bezpośrednio wywoływać .resolve() lub .reject()).

Metoda .promise() zwraca „tylko do odczytu” wersję obiektu Deferred. Udostępnia ona wyłącznie metody do dołączania callbacków (takie jak .done(), .fail() i .always()), ale nie metody zmiany stanu.

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

Sprawdź swoją wiedzę

Której z poniższych metod należy użyć, aby zarejestrować callback wykonywany WYŁĄCZNIE wtedy, gdy obiekt Deferred pomyślnie zakończy swoją operację asynchroniczną?

Podsumowanie: podstawy Deferred

Świetnie! W tej lekcji poznali Państwo najważniejsze pojęcia związane z obiektami jQuery Deferred:

  • Zarządzają operacjami asynchronicznymi, pozwalając uniknąć piekła callbacków.
  • Mogą znajdować się w stanie oczekującym, spełnionym lub odrzuconym.
  • Do oznaczenia powodzenia służy .resolve(), a do oznaczenia niepowodzenia — .reject().
  • Callbacki dołącza się za pomocą .done() (powodzenie), .fail() (niepowodzenie) i .always() (oba przypadki).
  • .promise() zwraca obiekt tylko do odczytu, chroniąc możliwość modyfikowania stanu.

W następnej części nauczą się Państwo łączyć te zaawansowane obiekty i komponować je w większe operacje!

Często zadawane pytania

Czy lekcja „Poznawanie obiektów Deferred” jest bezpłatna?

Tak — pełny tekst „Poznawanie obiektów Deferred” 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 „Poznawanie obiektów Deferred”?

Proszę poznać podstawowe pojęcia dotyczące obiektów Deferred jQuery, dowiedzieć się, jak reprezentują operacje asynchroniczne, oraz poznać ich stany (pending, resolved, rejected). Ć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 1 z 3.

Ile czasu zajmuje lekcja „Poznawanie obiektów Deferred”?

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

  1. Poznawanie obiektów Deferred
  2. Łączenie i komponowanie obietnic
  3. Obsługa wielu zadań asynchronicznych
← Powrót do jQuery Academy