jQuery Academy · Lekcja

Obsługa błędów i sukcesów AJAX

Proszę implementować solidne mechanizmy obsługi błędów za pomocą callbacków .fail() i .always() oraz przetwarzać pomyślnie pobrane dane przy użyciu .done(), tworząc odporne aplikacje.

Obsługa błędów i sukcesów AJAX to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 2 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.

Obsługa wyników asynchronicznych

Gdy wykonuje Pan/Pani żądanie AJAX, jest to operacja asynchroniczna. Oznacza to, że kod nie czeka na odpowiedź serwera, lecz kontynuuje wykonywanie innych zadań.

Do obsługi odpowiedzi serwera (lub jej braku) jQuery udostępnia specjalne metody nazywane callbackami. Te funkcje są wykonywane dopiero po wystąpieniu określonych zdarzeń, takich jak powodzenie lub niepowodzenie.

Gdy wszystko działa prawidłowo

Callback .done() służy do obsługi pomyślnych żądań AJAX. Jest wykonywany, gdy serwer odpowie kodem statusu oznaczającym powodzenie (zwykle 200–299).

Otrzymuje dane zwrócone przez serwer.
To idealne miejsce na zaktualizowanie interfejsu użytkownika o nowe informacje.

Wyświetlanie pomyślnie pobranych danych

Spróbujmy pobrać dane i wyświetlić je po pomyślnym wykonaniu żądania. Zwróć uwagę, że .done() jest łańcuchowo dołączone do wywołania $.ajax().

$(document).ready(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    method: "GET"
  })
  .done(function(data) {
    console.log("Success! Data received:");
    console.log(data.title); // Access a property
    $('body').append('<p>Post Title: ' + data.title + '</p>');
  });
});

Gdy coś pójdzie nie tak

A co, jeśli serwer nie może zrealizować żądania? Właśnie wtedy przydaje się callback .fail(). Jest wykonywany, gdy podczas żądania AJAX wystąpi błąd, na przykład 404 (Not Found) lub 500 (Server Error).

Pomaga poinformować użytkownika o problemie lub zapisać go w dzienniku.
Otrzymuje szczegóły dotyczące błędu.

Reagowanie na błędy

Spróbujmy pobrać dane z nieistniejącego adresu URL. Callback .fail() przechwyci błąd i zapisze jego szczegóły w dzienniku.

$(document).ready(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/nonexistent", // This URL will fail
    method: "GET"
  })
  .done(function(data) {
    console.log("This won't run on error.");
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Error! Status: " + textStatus);
    console.log("HTTP Error: " + errorThrown);
    $('body').append('<p>Error fetching data!</p>');
    $('body').append('<p>Status: ' + textStatus + '</p>');
  });
});

Objaśnienie parametrów błędu

Callback .fail() udostępnia trzy przydatne parametry, które pomagają zrozumieć, co poszło nie tak:

jqXHR: obiekt jQuery XMLHttpRequest zawierający szczegóły niskiego poziomu.
textStatus: ciąg znaków opisujący rodzaj błędu (np. "timeout", "error", "abort").
errorThrown: tekst statusu HTTP (np. "Not Found" dla kodu 404).

Używaj ich, aby przekazywać użytkownikom konkretne informacje zwrotne.

Wykonywanie niezależnie od wyniku

Czasami trzeba wykonać daną czynność niezależnie od tego, czy żądanie AJAX zakończyło się powodzeniem, czy niepowodzeniem. Do tego służy callback .always().

Jest zawsze wykonywany po jednym z callbacków .done() lub .fail().
Świetnie nadaje się do zadań porządkowych, takich jak ukrycie wskaźnika ładowania lub ponowne włączenie przycisku.

Wykonywanie czynności porządkowych

Dodajmy .always() do poprzedniego przykładu. Zasymulujemy stan ładowania i upewnimy się, że zostanie on usunięty niezależnie od tego, czy żądanie zakończy się powodzeniem, czy niepowodzeniem.

$(document).ready(function() {
  $('body').append('<p id="status">Loading data...</p>'); // Simulate loading
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1", // Try changing to 'nonexistent' to see fail+always
    method: "GET"
  })
  .done(function(data) {
    console.log("Success! Data: " + data.title);
    $('#status').text('Data loaded successfully!');
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Failed! " + textStatus);
    $('#status').text('Failed to load data!');
  })
  .always(function() {
    console.log("Request finished (success or failure).");
    // This could be where you hide a spinner or re-enable a button
    $('#status').append(' (Finished)');
  });
});

Porządkowanie callbacków

Metody AJAX biblioteki jQuery zwracają obiekt typu Promise-like, który umożliwia bezpośrednie łączenie metod .done(), .fail() i .always() w łańcuch.

Takie łańcuchowanie sprawia, że kod jest przejrzystszy i łatwiejszy do odczytania, wyraźnie oddzielając bloki logiki dotyczące powodzenia, błędów i końcowego działania.

Sprawdź swoją wiedzę

Rozważ następujące żądanie AJAX biblioteki jQuery:


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

Jeśli serwer odpowie błędem 404 Not Found, co zostanie wyświetlone w konsoli?

Podsumowanie obsługi AJAX

Opanował(a) Pan/Pani najważniejsze callbacki potrzebne do niezawodnej obsługi AJAX:

.done(): do obsługi pomyślnych odpowiedzi.
.fail(): do obsługi błędów.
.always(): do działań, które powinny zostać wykonane niezależnie od wyniku.

Dzięki nim aplikacje mogą sprawnie obsługiwać interakcje sieciowe, zapewniając użytkownikom lepsze doświadczenia nawet wtedy, gdy coś nie przebiegnie zgodnie z planem!

Często zadawane pytania

Czy lekcja „Obsługa błędów i sukcesów AJAX” jest bezpłatna?

Tak — pełny tekst „Obsługa błędów i sukcesów AJAX” 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 błędów i sukcesów AJAX”?

Proszę implementować solidne mechanizmy obsługi błędów za pomocą callbacków .fail() i .always() oraz przetwarzać pomyślnie pobrane dane przy użyciu .done(), tworząc odporne aplikacje. Ć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 2 z 3.

Ile czasu zajmuje lekcja „Obsługa błędów i sukcesów AJAX”?

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