Czym Jest Promise w Javascript?

20 grudnia 2021JavaScript
5 min326 wyświetleń

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:

  1. 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ę.
  2. Resolved: Mama wróciła ze sklepu i dała Ci obiecane ciastko.
  3. 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 😅).

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 🚀

Przeczytaj także inne artykuły

Next Step w Web Developmencie - Czym Jest Next.js?

Next.js to najczęściej pobierany framework React.js. Jego największą zaletą jest Server Side Rendering, ale możemy go również wykorzystać jako Static Site Generator. Next.js postawiony jest na serwerze Node.js, dzięki czemu możemy w prosty sposób stworzyć aplikacje Fullstack. W 2022 roku wciąż utrzymuje się na pozycji lidera, więc nie trać czasu i zobacz, co potrafi!

7 stycznia 2022Next
4 min247 wyświetleń

Czym Jest Remix i Dlaczego Jest o Nim Tak Głośno?

Remix to framework React.js, który z dnia na dzień zyskuje coraz większą popularność. Jest bardzo podobny do Next.js, czy Svelte, jednak wprowadza kilka unikalnych funkcjonalności, które czynią go wyjątkowym. Remix swoje działanie opiera na Server Site Renderingu, co oznacza, że dane renderowane są po stronie serwera i przesyłane do klienta z minimalną ilością Javascript. Sprawdź sam za co ludzie go pokochali!

20 grudnia 2021React
3 min150 wyświetleń