Lekcja 15: AJAX w jQuery - Obiekty Deferred i Promises (.done(), .fail(), .always())

Metody AJAX w jQuery (w tym $.ajax() i metody skrótowe jak $.get(), $.getJSON()) zwracają specjalny obiekt zwany jqXHR (jQuery XMLHttpRequest). Obiekt ten implementuje interfejs Promise, co pozwala na bardziej elastyczne i czytelne zarządzanie operacjami asynchronicznymi za pomocą metod .done(), .fail() i .always(), zamiast tradycyjnych callbacków w opcjach konfiguracyjnych.

Interfejs Promise w jQuery AJAX

Zamiast przekazywać funkcje success, error i complete w obiekcie konfiguracyjnym $.ajax(), możemy dołączyć je do obiektu jqXHR zwróconego przez wywołanie AJAX:

let zapytanie = $.ajax({ 
  url: "/api/dane",
  dataType: "json"
});

// Rejestrowanie callbacków za pomocą metod Promise
zapytanie.done(function(data, textStatus, jqXHR) {
  // Wykonywane po sukcesie (odpowiednik `success`)
  console.log("Sukces (done):", data);
});

zapytanie.fail(function(jqXHR, textStatus, errorThrown) {
  // Wykonywane po błędzie (odpowiednik `error`)
  console.error("Błąd (fail):", textStatus, errorThrown);
});

zapytanie.always(function(dataOrJqXHR, textStatus, jqXHROrErrorThrown) {
  // Wykonywane zawsze po zakończeniu (sukces lub błąd) (odpowiednik `complete`)
  console.log("Zawsze (always): Zapytanie zakończone.");
});

// Można też łączyć wywołania (chaining)
$.ajax({ url: "/api/inne-dane" })
  .done(function(dane) { /* obsługa sukcesu */ })
  .fail(function() { /* obsługa błędu */ })
  .always(function() { /* wykonaj zawsze */ });

Zalety Używania .done(), .fail(), .always():

• Czytelność: Oddzielenie konfiguracji zapytania od logiki obsługi odpowiedzi może poprawić czytelność kodu.
• Elastyczność: Można dołączyć wiele handlerów do tego samego zdarzenia (np. kilka funkcji .done()).
• Kompozycja: Umożliwia łatwiejsze zarządzanie wieloma zapytaniami AJAX (np. za pomocą $.when()).
• Obsługa błędów w metodach skrótowych: Jest to standardowy sposób obsługi błędów dla metod takich jak $.get() czy $.getJSON(), które nie przyjmują callbacku error jako argumentu.

Przykład z $.getJSON()

$("#pobierz-komentarze").on("click", function() {
  let postId = $("#post-id-input").val();

  $("#status").text("Ładowanie komentarzy...");

  $.getJSON("https://jsonplaceholder.typicode.com/comments", { postId: postId })
    .done(function(komentarze) {
      let listaHtml = "
";
      komentarze.forEach(kom => listaHtml += `
${kom.name}: ${kom.body}
`);
      listaHtml += "
";
      $("#lista-komentarzy").html(listaHtml);
      $("#status").text("Komentarze załadowane.");
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      $("#lista-komentarzy").empty();
      $("#status").text(`Błąd ładowania: ${textStatus} - ${errorThrown}`).css("color", "red");
    })
    .always(function() {
      console.log("Zakończono próbę pobrania komentarzy.");
    });
});

Łączenie Wielu Zapytań AJAX za pomocą $.when()

Czasami potrzebujemy wykonać kilka niezależnych zapytań AJAX i zareagować dopiero wtedy, gdy wszystkie się zakończą (pomyślnie). Do tego służy metoda $.when().

$.when() przyjmuje jako argumenty jeden lub więcej obiektów Deferred/Promise (np. zwróconych przez $.ajax()). Zwraca nowy obiekt Promise, który zostanie rozwiązany (resolved), gdy wszystkie przekazane Promise zostaną rozwiązane.

let zapytanieUzytkownikow = $.getJSON("/api/users");
let zapytanieProduktow = $.getJSON("/api/products");
let zapytanieUstawien = $.getJSON("/api/settings");

$.when(zapytanieUzytkownikow, zapytanieProduktow, zapytanieUstawien)
  .done(function(wynikUser, wynikProd, wynikUst) {
    // Ten callback wykona się, gdy WSZYSTKIE 3 zapytania zakończą się sukcesem
    
    // Argumenty funkcji `done` to tablice, gdzie pierwszy element [0] zawiera dane odpowiedzi
    let uzytkownicy = wynikUser[0];
    let produkty = wynikProd[0];
    let ustawienia = wynikUst[0];

    console.log("Wszystkie dane załadowane:", uzytkownicy, produkty, ustawienia);
    // Tutaj można zbudować interfejs używając wszystkich danych
  })
  .fail(function() {
    // Ten callback wykona się, jeśli KTÓREKOLWIEK z zapytań się nie powiedzie
    console.error("Wystąpił błąd podczas ładowania danych.");
  });

Ważne: Argumenty przekazywane do funkcji .done() po użyciu $.when() są tablicami. Każda tablica odpowiada jednemu z przekazanych Promise i zawiera argumenty, które normalnie trafiłyby do pojedynczego .done() (czyli [data, textStatus, jqXHR]).

<!DOCTYPE html>
<html>
<head>
    <title>Test $.when()</title>
</head>
<body>
    <button id="pobierz-dane-usera2">Pobierz Dane Usera 2</button>
    <div id="dane-kompletne" style="margin-top: 10px; border: 1px solid #ccc; padding: 10px; min-height: 100px;">
        <!-- Tutaj pojawią się dane -->
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function() {
            $("#pobierz-dane-usera2").on("click", function() {
                $("#dane-kompletne").html("Ładowanie danych...");

                let zapytanieUsera = $.getJSON("https://jsonplaceholder.typicode.com/users/2");
                let zapytaniePostow = $.getJSON("https://jsonplaceholder.typicode.com/posts", { userId: 2 });

                $.when(zapytanieUsera, zapytaniePostow)
                    .done(function(wynikUser, wynikPosty) {
                        let user = wynikUser[0]; // Dane użytkownika są w pierwszym elemencie pierwszej tablicy
                        let posts = wynikPosty[0]; // Dane postów są w pierwszym elemencie drugiej tablicy

                        let html = `<h3>${user.name}</h3>`;
                        html += "<h4>Posty:</h4>
";
                        posts.forEach(function(post) {
                            html += `
${post.title}
`;
                        });
                        html += "
";

                        $("#dane-kompletne").html(html);
                    })
                    .fail(function() {
                        $("#dane-kompletne").html("<p style=\'color: red;\'>Błąd podczas ładowania danych.</p>");
                    });
            });
        });
    </script>
</body>
</html>