Javascript Promise – Co to jest i jak skutecznie z niego korzystać?

W świecie programowania asynchronicznego w JavaScript, Promise to jedna z najważniejszych konstrukcji, która znacznie ułatwia zarządzanie operacjami, które wymagają czasu, jak np. pobieranie danych z serwera. Jeśli kiedykolwiek zastanawiałeś się, jak obsługiwać asynchroniczne operacje w sposób elegancki i czytelny, to Promise jest odpowiedzią, której szukasz. W tym artykule przyjrzymy się, czym jest Promise w JavaScript, jak działa oraz zaprezentujemy przykłady, które pomogą Ci zrozumieć i wykorzystać go w praktyce.

Co to jest JavaScript Promise?

Promise to obiekt w JavaScript, który reprezentuje zakończenie operacji asynchronicznej i jej wynik, który może pojawić się w przyszłości. Innymi słowy, Promise to swojego rodzaju obietnica, że dana operacja zakończy się w przyszłości, dając możliwość obsługi wyniku tej operacji lub ewentualnego błędu. Można powiedzieć, że Promise to sposób na lepszą organizację kodu, który operuje na asynchronicznych zadaniach.

Za pomocą Promise, operacje asynchroniczne, które normalnie wymagałyby zastosowania callbacków, stają się znacznie łatwiejsze do zarządzania. Dzięki Promise unikamy tzw. "callback hell", czyli sytuacji, w której funkcje wywołują się nawzajem w sposób, który prowadzi do trudnego do zarządzania kodu.

Jak działa Promise?

W skrócie, Promise jest obiektem, który może przyjąć jeden z trzech stanów:

• Pending (oczekujący): Promise jest w stanie oczekiwania i jeszcze nie zakończył operacji.
• Resolved (rozwiązany): Promise zakończył operację pomyślnie i zwrócił wynik.
• Rejected (odrzucony): Promise zakończył operację z błędem.

Każda Promise może przejść tylko przez te trzy stany, od "pending" do "resolved" lub "rejected". Gdy Promise jest zakończony (rozwiązany lub odrzucony), następuje wywołanie odpowiednich metod, takich jak `.then()` dla sukcesu i `.catch()` dla błędu.

Tworzenie Promise

Aby stworzyć Promise w JavaScript, wystarczy użyć konstrukcji `new Promise()`. Przyjmuje ona jeden argument – funkcję, która ma dwa parametry: `resolve` i `reject`. Parametr `resolve` jest wywoływany, gdy operacja zakończy się sukcesem, a `reject` – gdy operacja zakończy się niepowodzeniem.

const promise = new Promise((resolve, reject) => {
    let success = true;
    
    if (success) {
        resolve("Operacja zakończona sukcesem!");
    } else {
        reject("Coś poszło nie tak...");
    }
});

W tym przykładzie, jeśli zmienna `success` jest ustawiona na `true`, Promise zostanie "rozwiązane", a jeśli na `false`, Promise zostanie "odrzucone". Teraz, aby obsłużyć wynik tego Promise, możemy użyć metod `.then()` i `.catch()`.

Metody Promise: .then() i .catch()

Metoda `.then()` pozwala nam na obsługę przypadku, gdy Promise zostanie rozwiązany z sukcesem, natomiast metoda `.catch()` służy do obsługi błędów, które mogą wystąpić w czasie wykonywania operacji.

promise
    .then(result => {
        console.log(result);  // Zostanie wyświetlone: "Operacja zakończona sukcesem!"
    })
    .catch(error => {
        console.log(error);  // Zostanie wyświetlone: "Coś poszło nie tak..."
    });

W powyższym przykładzie, jeżeli Promise zostanie rozwiązane, wyświetli się wynik w konsoli, a jeśli operacja zakończy się błędem, zobaczymy komunikat o błędzie.

Łańcuchowanie Promise

Jedną z potężnych cech Promise jest możliwość łańcuchowania wielu operacji asynchronicznych za pomocą `.then()`. Każde wywołanie `.then()` zwraca nowy Promise, co pozwala na budowanie ciągu operacji, które mają się wykonać po sobie.

new Promise((resolve, reject) => {
    resolve(10);
})
    .then(result => {
        console.log(result);  // Zostanie wyświetlone: 10
        return result * 2;    // Zwracamy nową wartość dla kolejnego .then()
    })
    .then(result => {
        console.log(result);  // Zostanie wyświetlone: 20
    })
    .catch(error => {
        console.log(error);  // W przypadku błędu, wyświetli się komunikat o błędzie
    });

Jak widać, po zakończeniu pierwszego `.then()`, wynik jest przekazywany do następnego `.then()`, co pozwala na łatwą kontynuację operacji w przypadku, gdy wszystko przebiega pomyślnie.

Promise.all() i Promise.race()

Czasami może być potrzeba, aby uruchomić kilka operacji asynchronicznych równocześnie i poczekać na zakończenie wszystkich z nich. W takich przypadkach z pomocą przychodzą metody `Promise.all()` oraz `Promise.race()`.

Promise.all()

Metoda `Promise.all()` umożliwia wykonanie wielu Promise jednocześnie i czeka na ich zakończenie. Zwraca nowy Promise, który zostanie rozwiązany, gdy wszystkie operacje zakończą się sukcesem. Jeśli jedna z operacji zakończy się błędem, całość zostanie odrzucona.

const promise1 = new Promise(resolve => setTimeout(resolve, 1000, 'Pierwszy'));
const promise2 = new Promise(resolve => setTimeout(resolve, 2000, 'Drugi'));
const promise3 = new Promise(resolve => setTimeout(resolve, 1500, 'Trzeci'));

Promise.all([promise1, promise2, promise3])
    .then(results => {
        console.log(results);  // Zostanie wyświetlone: ['Pierwszy', 'Drugi', 'Trzeci']
    })
    .catch(error => {
        console.log(error);  // Obsługuje błąd, jeśli któryś z Promise nie zakończy się sukcesem
    });

W powyższym przykładzie wszystkie operacje asynchroniczne zostaną uruchomione równocześnie, a `Promise.all()` poczeka na zakończenie wszystkich z nich, aby zwrócić wyniki.

Promise.race()

Z kolei metoda `Promise.race()` działa trochę inaczej. Zwraca nowy Promise, który zostanie rozwiązany lub odrzucony w momencie, gdy którykolwiek z Promise zakończy swoje działanie, niezależnie od tego, czy zakończy się sukcesem czy błędem.

const promise1 = new Promise(resolve => setTimeout(resolve, 1000, 'Pierwszy'));
const promise2 = new Promise(resolve => setTimeout(resolve, 2000, 'Drugi'));

Promise.race([promise1, promise2])
    .then(result => {
        console.log(result);  // Zostanie wyświetlone: 'Pierwszy' (bo zakończył się szybciej)
    })
    .catch(error => {
        console.log(error);
    });

Podsumowanie

Promise w JavaScript to potężne narzędzie, które ułatwia pracę z asynchronicznymi operacjami. Dzięki Promise możemy uniknąć chaosu związanego z callback hell i uzyskać bardziej czytelny i łatwiejszy do zarządzania kod. Poznając metody takie jak `.then()`, `.catch()`, `Promise.all()` czy `Promise.race()`, zyskujemy pełną kontrolę nad tym, jak i kiedy nasze asynchroniczne operacje zostaną wykonane. Teraz, kiedy wiesz już, jak działa Promise, możesz zacząć stosować tę technologię w swoich projektach i sprawić, że Twój kod będzie bardziej elegancki i efektywny!