Czym Jest Promise w Javascript?

Promise sprawia chyba najwięcej problemów na początku drogi każdego Frontend Developera. Sam pamiętam, jak po obejrzeniu kilku, jak nie kilkunastu poradników, w dalszym ciągu nie wiedziałem, o co chodzi...

Od początku - co to Promise w Javascript?

Zacznijmy od prostego przykładu, dzięki któremu sam zrozumiałem zasadę działania Promise w Javascript:

Wyobraź sobie, że jesteś dzieckiem. Twoja mama jedzie do sklepu i mówi Ci, że byłeś w tym tygodniu grzeczny, więc kupi Ci Twoje ulubione ciastko. To jest właśnie Promise, czyli Obietnica.

Składa się z 3 etapów:

Pending: Okres, w którym czekasz aż mama wróci ze sklepu. Jednocześnie podczas czekania możesz robić inne rzeczy, bawić się samochodzikami, oglądać bajkę.
Resolved: Mama wróciła ze sklepu i dała Ci obiecane ciastko.
Rejected: Podczas zakupów wydarzyło się coś, co sprawiło, że mama wróciła do domu bez ciastka, np. nie było już żadnych w sklepie.

Stwórzmy własny Promise w Javascript

Dobra, wiemy już, jak działa Promise. Teraz zobaczmy, jak to wygląda w kodzie.

Na początek stwórzmy nowy obiekt Promise:

const getCookie = new Promise();

Tak jak pisałem wyżej, nasza obietnica przyjmuje dwa parametry:

Resolve - jeśli obietnica zakończy się sukcesem
Reject - jeśli wystąpi błąd podczas wykonywania obietnicy

const getCookie = new Promise((resolve, reject) => {
  // warunek
});

Na koniec musimy postawić warunek. Wzorując się na naszym przykładzie: jeśli ciastko jest w sklepie, to mama nam je kupi

const getCookiePromise = new Promise((resolve, reject) => {
  let isCookieInTheStore;

  if(isCookieInTheStore) {
    resolve('Mom gave us a cookie!');
  }
  else {
    reject('There was no cookie in the store :c');
  }
});

Skoro stworzyliśmy już własny Promise, najwyższy czas go użyć.

Promise zakończony sukcesem - then()

Tak jak wspomniałem wyżej, Promise może skończyć się sukcesem, bądź zostać odrzucona.

Zacznijmy od bardziej optymistycznego przypadku:

getCookiePromise.then();

Metoda then() jest wywoływana, jeśli nasz Promise zakończy się sukcesem (resolve). Dzięki niemu możemy ustalić, co ma wydarzyć się potem:

getCookiePromise.then(() => {
  eatCookie();
});

Promise odrzucony - catch()

Metoda catch() jest wywoływana w momencie, gdy nasz promise został odrzucony.

getCookiePromise.then(() => {
  eatCookie();
}).catch(()=> {
  eatBanana();
});

W tym wypadku, skoro nie dostaliśmy naszego ciastka, musimy niestety zjeść coś innego (sam jako dziecko nienawidziłem bananów, nie wiem, dlaczego ten owoc przyszedł mi pierwszy do głowy 😅).

Przerywnik - chciałbym Cię serdecznie zaprosić na mojego discorda Digital Creators Community!

Promise w prawdziwym życiu

Przykład ciastka był bardzo prosty i miał Ci tylko zobrazować zasadę działania Promise. Teraz zobaczmy jak to wygląda w rzeczywistości.

Najlepszym przykładem są żądania HTTP. Jako Frontend Developer bardzo często będziesz musiał pobierać dane z backendu, a więc Javascript Promise będzie dla Ciebie codziennością.

Wyobraź sobie, że jesteś Frontend Developerem w firmie, która prowadzi dokumentację na temat ras psów.

Twoim zadaniem jest wyświetlenie na stronie losowego zdjęcia psa. W tym wypadku skorzystamy z darmowego api oraz biblioteki axios, która pozwoli nam wykonać żądanie HTTP.

axios.get('https://dog.ceo/api/breeds/image/random').then((result) => {
  console.log(result.data);
});

Operacja została wykonana prawidłowo - w konsoli możemy zobaczyć:

{
  message: 'https://images.dog.ceo/breeds/akita/Akita_hiking_in_Shpella_e_Pellumbasit.jpg',
  status: 'success'
}

W tym przykładzie nie obsłużyliśmy jednak przypadku, w którym wystąpił błąd. Tak więc dodajmy catch() i wprowadźmy błędny link do API:

axios.get('https://dog.ceo/api/breeds/image/error').then((result) => {
  console.log(result.data);
}).catch((error) => {
  console.log(error);
});

Jak widzimy, z powodu nieprawidłowego linku w konsoli wyświetlił się komunikat:

Error: Request failed with status code 404

Pamiętasz, jak wspominałem, że podczas, gdy Twoja mama jest w sklepie, możesz w międzyczasie robić wiele innych rzeczy?

Nie inaczej jest tutaj.

Wprowadźmy prawidłowy link do naszego zapytania oraz dodajmy kilka obliczeń pod Promise.

axios.get('https://dog.ceo/api/breeds/image/random').then((result) => {
  console.log(result.data);
}).catch((error) => {
  console.log(error);
});

let a = 4, b = 5;
console.log(a * b);

W konsoli otrzymujemy:

20
{
  message: '<https://images.dog.ceo/breeds/sheepdog-english/n02105641_5305.jpg>',
  status: 'success'
}

Jak widzisz, w trakcie wykonywania naszego Promise byliśmy w stanie kontynuować działanie naszego kodu, bez niepotrzebnego oczekiwania.
Niepotrzebnego?

W rzeczywistości warto czasem poczekać, ale dowiesz się o tym więcej w innym artykule.

Podsumowanie

Jak widzisz, Promise w Javascript wcale nie są takie trudne, jednak trzeba poświęcić im trochę czasu. Mam nadzieję, że ten prosty przykład zobrazował Ci, w jaki sposób działa promise.

Najlepszą radą na pełne zrozumienie Promise jest praktyka, a nawet całkiem sporo praktyki. Poszukaj w internecie kilka darmowych API i spróbuj zrobić trochę przykładów samodzielnie.

Nauka Javascript na wysokim poziomie jest szczególnie istotna na początku drogi jako Frontend Developer. Tutaj napisałem dlaczego 🚀