Czym jest obietnica (Promise) w JavaScript?

By /

JavaScript

Obietnica (Promise) w JavaScript to obiekt używany do obsługi operacji asynchronicznych. Umożliwia on zarządzanie wartościami, które mogą być dostępne teraz, w przyszłości lub nigdy. Obietnice pozwalają na organizowanie kodu w sposób, który ułatwia zarządzanie operacjami asynchronicznymi, takimi jak żądania sieciowe, operacje na plikach czy opóźnienia czasowe, eliminując potrzebę zagnieżdżania wywołań zwrotnych i zwiększając czytelność kodu.

Przykład użycia obietnicy w JavaScript

Załóżmy, że chcemy wykonać prostą operację asynchroniczną, taką jak symulacja pobierania danych z serwera, która może zakończyć się sukcesem lub niepowodzeniem po pewnym czasie. Poniżej przedstawiamy przykład, jak można to zrealizować za pomocą obietnic w połączeniu z prostym kodem HTML.

Struktura pliku HTML z JavaScript
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przykład Promise w JavaScript</title>
</head>
<body>
    <button id="loadData">Załaduj dane</button>
    <div id="data"></div>

    <script>
        // Funkcja symulująca pobieranie danych
        function fetchData() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    // Symulacja losowego wyniku
                    const success = Math.random() > 0.5;
                    if (success) {
                        resolve("Dane zostały załadowane pomyślnie.");
                    } else {
                        reject("Nie udało się załadować danych.");
                    }
                }, 2000); // 2 sekundy opóźnienia
            });
        }

        document.getElementById('loadData')
         .addEventListener('click', () => {
            fetchData().then(data => {
                document.getElementById('data').textContent = data;
            }).catch(error => {
                document.getElementById('data').textContent = error;
            });
        });
    </script>
</body>
</html>

W powyższym przykładzie:

  • Funkcja fetchData zwraca obietnicę, która symuluje asynchroniczne pobieranie danych z opóźnieniem dwóch sekund. W zależności od losowego wyniku, obietnica jest spełniona (resolved) z wiadomością o sukcesie lub odrzucona (rejected) z wiadomością o błędzie.
  • Przycisk w HTML wywołuje funkcję fetchData po kliknięciu, a następnie obsługujemy wynik za pomocą metod .then() (jeśli obietnica została spełniona) i .catch() (jeśli obietnica została odrzucona), odpowiednio aktualizując treść elementu <div>.

Podsumowanie

Obietnice w JavaScript stanowią potężne narzędzie do obsługi operacji asynchronicznych, pozwalające pisać kod w sposób bardziej strukturalny i czytelny, zwłaszcza w porównaniu do tradycyjnych wywołań zwrotnych. Umożliwiają one łatwe zarządzanie sekwencją operacji asynchronicznych oraz efektywne obsługiwanie błędów. Dzięki obietnicom, programiści mogą tworzyć bardziej niezawodne i łatwiejsze w utrzymaniu aplikacje webowe.

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