Stany obiektu Promise w JavaScript

By /

JavaScript

Obiekty Promise w JavaScript są kluczowym elementem asynchronicznego programowania, umożliwiającym efektywne zarządzanie operacjami, które mogą nie zakończyć się natychmiast. Promise reprezentuje wartość, która może być dostępna teraz, w przyszłości lub nigdy. W kontekście obietnic, ważne jest zrozumienie trzech stanów, w jakich może się znaleźć Promise: pending (oczekujący), fulfilled (spełniony) oraz rejected (odrzucony).

Przykład użycia obiektu Promise

Poniżej przedstawiamy przykład kodu, który demonstruje użycie obiektu Promise wraz z prostym kodem HTML. Przykład ten ilustruje, jak można tworzyć promisy oraz obsługiwać ich różne stany.

Kod HTML i JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład Promise w JavaScript</title>
</head>
<body>
    <button id="loadData">Załaduj dane</button>
    <script>
        // Funkcja zwracająca Promise
        function fetchData() {
            return new Promise((resolve, reject) => {
                // Symulacja żądania sieciowego
                // Zmień na false, aby przetestować odrzucenie
                const success = true; 
                setTimeout(() => {
                    if (success) {
                        resolve("Dane zostały pomyślnie załadowane.");
                    } else {
                        reject("Wystąpił błąd podczas ładowania danych.");
                    }
                }, 2000);
            });
        }

        document.getElementById('loadData')
         .addEventListener('click', () => {
            console.log("Żądanie danych...");
            fetchData().then(data => {
                console.log(data); // Obsługa stanu spełnionego
            }).catch(error => {
                console.error(error); // Obsługa stanu odrzuconego
            });
        });
    </script>
</body>
</html>

W powyższym przykładzie:

  • Definiujemy funkcję fetchData, która zwraca Promise. Wewnątrz Promise, symulujemy operację asynchroniczną za pomocą setTimeout.
  • Używamy logiki warunkowej do symulacji spełnienia lub odrzucenia obietnicy.
  • Dodajemy nasłuchiwacz zdarzeń do przycisku, który wywołuje funkcję fetchData po kliknięciu. Następnie obsługujemy możliwe stany Promise za pomocą metod .then() (dla stanu spełnionego) i .catch() (dla stanu odrzuconego).

Stany obiektu Promise

  • Pending (Oczekujący): Początkowy stan Promise, oznaczający, że operacja jeszcze się nie zakończyła.
  • Fulfilled (Spełniony): Stan oznaczający, że operacja asynchroniczna zakończyła się powodzeniem i Promise został spełniony.
  • Rejected (Odrzucony): Stan wskazujący, że operacja asynchroniczna zakończyła się niepowodzeniem, a Promise został odrzucony.

Podsumowanie

Obiekty Promise w JavaScript zapewniają potężne narzędzie do obsługi operacji asynchronicznych, umożliwiając programistom lepsze zarządzanie przepływem danych w aplikacjach. Rozumienie różnych stanów, w jakich może się znaleźć Promise, jest kluczowe dla efektywnego programowania asynchronicznego i obsługi potencjalnych błędów w aplikacjach webowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

Powiązane artykuły

Scroll to Top