Lekcja 15: Asynchroniczny JavaScript - Obietnice (Promises)

W poprzedniej lekcji omówiliśmy funkcje zwrotne (callbacks) jako sposób radzenia sobie z asynchronicznością w JavaScript, ale zauważyliśmy też problem "Callback Hell". Aby rozwiązać ten problem i ułatwić zarządzanie operacjami asynchronicznymi, w ES6 wprowadzono Obietnice (Promises).

Co to jest Obietnica (Promise)?

Obietnica to obiekt reprezentujący ostateczny wynik (lub błąd) operacji asynchronicznej. Zamiast przekazywać callback do funkcji asynchronicznej, funkcja ta zwraca obiekt obietnicy. Do tego obiektu możemy następnie "podpiąć" funkcje, które mają zostać wykonane, gdy operacja się zakończy (sukcesem lub porażką).

Obietnica może znajdować się w jednym z trzech stanów:

1. Pending (Oczekująca): Stan początkowy, operacja asynchroniczna jeszcze się nie zakończyła.
2. Fulfilled (Spełniona/Rozwiązana): Operacja asynchroniczna zakończyła się sukcesem. Obietnica przechowuje wynik operacji.
3. Rejected (Odrzucona): Operacja asynchroniczna zakończyła się błędem. Obietnica przechowuje powód błędu (zazwyczaj obiekt Error).

Obietnica jest obiektem "jednorazowym" - gdy przejdzie ze stanu pending do fulfilled lub rejected, jej stan i wynik (lub błąd) już się nie zmienią.

Tworzenie Obietnicy

Obietnice tworzymy za pomocą konstruktora new Promise(). Konstruktor przyjmuje jako argument funkcję (tzw. "executor"), która sama otrzymuje dwa argumenty: funkcję resolve i funkcję reject.

• Wewnątrz funkcji "executor" wykonujemy operację asynchroniczną.
• Jeśli operacja zakończy się sukcesem, wywołujemy resolve(wynik), przekazując wynik operacji. To zmienia stan obietnicy na fulfilled.
• Jeśli operacja zakończy się błędem, wywołujemy reject(błąd), przekazując powód błędu. To zmienia stan obietnicy na rejected.

function symulujPobieranieDanych(czySukces) {
    // Zwracamy nową obietnicę
    return new Promise((resolve, reject) => {
        console.log("Rozpoczynam pobieranie danych (Promise)...");
        setTimeout(() => {
            if (czySukces) {
                const dane = { id: 1, name: "Produkt A" };
                console.log("Dane pobrane pomyślnie.");
                // Operacja udana - rozwiązujemy obietnicę z wynikiem
                resolve(dane);
            } else {
                const blad = new Error("Nie udało się pobrać danych!");
                console.error("Wystąpił błąd podczas pobierania.");
                // Operacja nieudana - odrzucamy obietnicę z błędem
                reject(blad);
            }
        }, 1500); // Symulacja opóźnienia 1.5 sekundy
    });
}

// Użycie funkcji zwracającej Promise
const obietnicaDanych = symulujPobieranieDanych(true);
console.log("Obietnica utworzona, stan: pending", obietnicaDanych);

// Co się stanie po 1.5 sekundy? Obietnica zmieni stan...
// Jak zareagować na zmianę stanu - patrz poniżej.

Konsumowanie Obietnicy (`.then()`, `.catch()`, `.finally()`)

Aby zareagować na zmianę stanu obietnicy, używamy metod dołączanych do obiektu Promise:

• promise.then(onFulfilled, onRejected):
  • onFulfilled: Funkcja, która zostanie wywołana, gdy obietnica zostanie spełniona (fulfilled). Otrzymuje wynik przekazany do resolve() jako argument.
  • onRejected (opcjonalny): Funkcja, która zostanie wywołana, gdy obietnica zostanie odrzucona (rejected). Otrzymuje błąd przekazany do reject() jako argument.
  Metoda .then() sama zwraca nową obietnicę, co umożliwia łączenie operacji (chaining).
• promise.catch(onRejected): Skrót dla promise.then(null, onRejected). Służy do obsługi błędów (stanu rejected). Również zwraca nową obietnicę.
• promise.finally(onFinally) (ES2018): Funkcja onFinally zostanie wywołana niezależnie od tego, czy obietnica została spełniona, czy odrzucona. Przydatne do wykonywania operacji czyszczących (np. ukrywanie wskaźnika ładowania). Nie otrzymuje wyniku ani błędu jako argumentu. Zwraca nową obietnicę.

// Kontynuacja poprzedniego przykładu

// 1. Użycie .then() z dwoma argumentami
symulujPobieranieDanych(true)
    .then(
        (dane) => {
            console.log("Sukces (.then - onFulfilled):", dane);
        },
        (blad) => {
            console.error("Błąd (.then - onRejected):", blad.message);
        }
    );

// 2. Użycie .then() dla sukcesu i .catch() dla błędu (preferowane)
symulujPobieranieDanych(false) // Tym razem symulujemy błąd
    .then((dane) => {
        // Ten blok się nie wykona, bo obietnica zostanie odrzucona
        console.log("Sukces (.then + .catch):", dane);
    })
    .catch((blad) => {
        // Ten blok obsłuży błąd
        console.error("Błąd (.catch):", blad.message);
    });

// 3. Użycie .finally()
symulujPobieranieDanych(true)
    .then((dane) => {
        console.log("Dane z finally:", dane);
        // Można tu zwrócić coś, co będzie wynikiem kolejnego .then()
        return dane.name;
    })
    .catch((blad) => {
        console.error("Błąd z finally:", blad.message);
        // Można tu rzucić błąd dalej lub zwrócić wartość domyślną
        throw blad; // Rzucenie błędu dalej
    })
    .finally(() => {
        // Ten blok wykona się zawsze, po .then() lub .catch()
        console.log("Operacja zakończona (finally) - czyszczenie zasobów...");
    })
    .then((nazwaProduktu) => {
        // Ten .then() otrzyma wynik z poprzedniego .then() (jeśli nie było błędu)
        console.log("Wynik po finally (jeśli sukces):", nazwaProduktu);
    })
    .catch((blad) => {
        // Ten .catch() złapie błąd rzucony z poprzedniego .catch()
        console.error("Błąd po finally (jeśli błąd):", blad.message);
    });

Łańcuchowanie Obietnic (Promise Chaining)

Ponieważ .then() i .catch() zwracają nowe obietnice, możemy je łączyć w łańcuchy, aby wykonywać sekwencyjne operacje asynchroniczne w bardziej czytelny sposób niż przy użyciu zagnieżdżonych callbacków.

• Jeśli funkcja onFulfilled w .then() zwróci wartość, ta wartość staje się wynikiem nowej obietnicy zwróconej przez .then().
• Jeśli funkcja onFulfilled zwróci inną obietnicę, nowa obietnica zwrócona przez .then() "przyjmie" stan i wynik tej zwróconej obietnicy. To pozwala czekać na zakończenie kolejnej operacji asynchronicznej.
• Jeśli wystąpi błąd w którymkolwiek kroku łańcucha (lub obietnica zostanie odrzucona), sterowanie przechodzi do najbliższego bloku .catch() w dół łańcucha.

function krokA(wartosc) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("Krok A zakończony");
            resolve(wartosc + 1);
        }, 500);
    });
}

function krokB(wartosc) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("Krok B zakończony");
            resolve(wartosc * 2);
        }, 500);
    });
}

function krokC(wartosc) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (wartosc > 20) {
                console.log("Krok C zakończony");
                resolve(wartosc - 3);
            } else {
                reject(new Error("Wartość w kroku C jest za mała!"));
            }
        }, 500);
    });
}

console.log("Rozpoczynam łańcuch obietnic...");

krokA(10)
    .then((wynikA) => {
        console.log("Wynik kroku A:", wynikA); // 11
        // Zwracamy obietnicę z kroku B
        return krokB(wynikA);
    })
    .then((wynikB) => {
        console.log("Wynik kroku B:", wynikB); // 22
        // Zwracamy obietnicę z kroku C
        return krokC(wynikB);
    })
    .then((wynikC) => {
        console.log("Wynik kroku C:", wynikC); // 19
        console.log("Wszystkie kroki zakończone pomyślnie!");
    })
    .catch((blad) => {
        // Ten blok złapie błąd z dowolnego poprzedniego kroku
        console.error("Wystąpił błąd w łańcuchu:", blad.message);
    })
    .finally(() => {
        console.log("Koniec łańcucha (finally).");
    });

console.log("Łańcuch obietnic zainicjowany.");

Łańcuchowanie obietnic jest znacznie bardziej czytelne niż "Callback Hell".

function pobierzDaneUzytkownikaPromise(id) {
    return new Promise((resolve, reject) => {
        console.log(`Pobieranie danych (Promise) dla użytkownika o ID: ${id}...`);
        setTimeout(() => {
            if (id > 0) {
                const daneUzytkownika = {
                    id: id,
                    imie: "Anna",
                    email: "anna@example.com"
                };
                console.log("Dane pobrane (Promise).");
                resolve(daneUzytkownika);
            } else {
                const blad = new Error("Nieprawidłowe ID użytkownika (Promise)");
                console.error("Błąd ID (Promise).");
                reject(blad);
            }
        }, 1000);
    });
}

// Wywołanie z poprawnym ID
pobierzDaneUzytkownikaPromise(456)
    .then(uzytkownik => {
        console.log("--- Dane Użytkownika (Promise) ---");
        console.log(`ID: ${uzytkownik.id}`);
        console.log(`Imię: ${uzytkownik.imie}`);
        console.log(`Email: ${uzytkownik.email}`);
        console.log("---------------------------------");
    })
    .catch(blad => {
        console.error("Błąd pobierania (poprawne ID):", blad.message);
    });

// Wywołanie z niepoprawnym ID
pobierzDaneUzytkownikaPromise(-5)
    .then(uzytkownik => {
        // Ten blok się nie wykona
        console.log("Dane użytkownika (niepoprawne ID):", uzytkownik);
    })
    .catch(blad => {
        console.error("Błąd pobierania (niepoprawne ID):", blad.message);
    });

console.log("Zapytania o dane użytkownika (Promise) wysłane.");