EcmaScript 6: Korzystanie z Promise

0:00W tej lekcji porozmawiamy o tym, czym są promise i w jaki sposób działają.

0:04EcmaScript 6, można powiedzieć, że wprowadza natywne promise'y, bo

0:08jest to koncepcja, która od wielu lat była dostępna w środowisku JavaScript'owców,

0:12dlatego, że można to było spokojnie napisać w kodzie EcmaScript 5 No

0:16i właśnie w ten sposób to powstało, ale, że promisy są bardzo popularne, to zostały

0:20też dodane w specyfikacji i możemy z nich korzystać w natywny sposób, więc pokażę

0:25ci teraz na czym one polegają. Na początek przygotowałem sobie taki kod, w razie

0:29czego sobie zapauzuj i prześledź, Co tutaj się dzieje, aczkolwiek nic tutaj nowego nie zrobiłem,

0:33czego jeszcze mógłbyś nie znać, czyli generalnie stworzyłam sobie tylko metodę

0:37pomocniczą, która pozwoli mi wyszukać na stronie elementy, bo będę to robił kilkukrotnie. D

0:41odatkowo to, co jest ważne. stworzyłem metodę get json. Podaje

0:46jej adres URL i ona tworzy nowy obiekt Ajax'owy. Otwiera

0:50go, przypisuje zdarzenie, że jeżeli uda się wszystko pobrać to wyświetlimy sobie

0:54odpowiedź w konsoli. Jeżeli będzie błąd, to chcemy ten błąd wyświetlić, też

0:58w konsoli i na onerror gdyby jakieś problemy sieciowe na przykład były też

1:02wyświetliły błąd na końcu to wysyłamy i teraz po kliknięciu na przycisk który sobie pobieram

1:06właśnie tą metodą pomocniczą, chcę wykonać funkcje get json,

1:11przekazując jej adres, czyli ona otrzyma adres. Wyślę zapytanie kiedy

1:15ono powróci, poprawnie to na przykład będziemy mieli wykonaną tą linijkę.

1:19Kliknijmy pobierz dane, zapytanie się wysłało i dane zostały wyświetlone

1:23tutaj, więc jak widzisz nie ma tutaj żadnej magii, ale teraz pokażę

1:27ci na tym przykładzie jak wykorzystać promise. Generalnie promise,

1:31czyli tak zwane obietnice są stworzone do tego, aby pracować z asynchronicznym

1:35kodem i wiemy, że ajax jest idealnym przykładem asynchroniczności, aczkolwiek takiej

1:40asynchroniczności możemy oczekiwać czy możemy ją znaleźć również

1:44w środowisku takim jak Node.js, bo tam na przykład otwierając jakiś

1:48plik z dysku też podajemy funkcje callback mówiąc kiedy uda ci się

1:52odczytać ten plik, to wykonaj tą funkcję i to zawsze chwilę trwa. Oczywiście

1:56zazwyczaj nie jest to zauważalne, ale nie mniej jednak nie jest to synchroniczny kod dlatego promise'y tam

2:02też są bardzo przydatne i teraz co by było gdybym ten kod, który jest tutaj

2:06chciał zamienić w taki sposób i być może już to widziałeś na przykład korzystając

2:10z biblioteki jQuary, która ma podobny obiekt deffered. Chciałbym napisać get

2:14json i móc później napisać then, czyli kiedy uda ci się pobrać te

2:18dane, to wykonaj funkcję którą tutaj przekażę przekazując mi te dane na przykład

2:23pod parametrem json. Ja bym te dane chciał wstawić na stronę, ale znamy

2:27już zapis arrow function, więc skorzystajmy tutaj z uproszczonego zapisu. Tworzę

2:32funkcję, która przyjmie parametr json i kiedy go otrzymam, to chciałbym sobie na

2:36stronie znaleźć element pre-39, jak na przykład. Znajdziesz

2:41go tutaj w html'u i do niego będę chciał poprzez textContent przypisać

2:46sobie json, czyli znasz już taki zapis arrow function tylko, że teraz mi to nie zadziała, bo

2:51łatwo się domyśleć, czytając ten kod, że get json nic nie zwraca,

2:55czyli zwraca domyślnie undefined i ja na tym undefined próbuję zrobić then. Oczywiste,

3:00że to musi wygenerować błąd po kliknięciu w przycisk. No i tak też się stało, błąd

3:04się pojawił, bo then na undefined nie jest dostępne, czyli musimy zwrócić sobie

3:08z funkcji get json, coś, co będzie zawierało metodę then. No i

3:12właśnie będzie to promise. Teraz sobie taką promiskę będę chciał utworzyć i zrobimy,

3:18to na przykład w tym miejscu, napiszę let p równa się new promise, w taki

3:24sposób w EcmaScript 6 tworzymy promise i podajemy jej zawsze funkcję, która

3:28otrzyma dwa parametry. Pierwszy z nich jest to resolve. Możesz

3:33go nazwać inaczej oczywiście, bo to ty definiujesz funkcję w tym miejscu, ale zazwyczaj

3:37nazywamy go jako resolve, a następnie jako reject i interpreter JavaScriptu,

3:42kiedy będzie wykonywał ten kod umieści pod tymi dwoma parametrami

3:46odpowiednie funkcje, więc resolve i reject, to są funkcje, które możesz

3:50wywołać w dowolnym momencie i teraz resolve wywołujesz jeżeli

3:54wszystko było okej, a reject jeżeli wystąpił z twojego punktu widzenia

3:58jakiś błąd. Dlatego teraz będziemy chcieli sobie zrobić coś takiego, że

4:02przypiszemy zdarzenie onload tutaj i w momencie

4:06kiedy uda się nam wszystko wczytać, ta linijka dla mnie oznacza

4:10sukces, to wykonam sobie funkcję, którą mi przekaże JavaScript'owy

4:15resolve. Zauważ, że mogę jej coś przekazać i powiem ci od razu, że

4:19kiedy wykonujemy resolve, zauważ, że od nas zależy kiedy to wykonamy. To

4:23wtedy wykona się to, co ktoś dopisał do then. Tylko, że na końcu,

4:27bo cały czas o tym mówię, że get json musi coś zwracać, taki promise musimy

4:31zwrócić, więc zaraz jeszcze dokończymy pozostałe rzeczy, ale zróbmy sobie return p,

4:35czyli jeszcze raz promise zwraca nam jakiś nowy obiekt,

4:40który my zwracamy z tej funkcji. Ten nowy obiekt zawiera w sobie między innymi

4:44metodę then, dlatego mogę z niej skorzystać. Po wywołaniu get json i tej metodzie then, jako pierwszy

4:49parametr przekazuje się funkcję, która się wywoła wtedy, kiedy

4:53wewnątrz tej promisy wykonamy resolve. Może to być nawet za 10

4:58sekund, mógłbyś sobie tutaj timeout ustawić, zamiast korzystać na przykład z ajax'a. Wiemy

5:02jednak, że ajax jest asynchroniczny, więc wykona się po jakimś czasie. Kiedy

5:06wywołuje sobie resolve, to mogę przekazać co mi się podoba i to będzie wtedy

5:10tutaj, czyli kiedy przepisuje jeden, mówię wywołaj tą

5:14funkcję z parametrem json, a tymże parametrem jest właśnie to. Natomiast

5:18drugi parametr to then, dlatego może zróbmy tutaj trochę miejsca. Jest

5:23to druga funkcja. Jeżeli dla ciebie bardziej czytelne są te zwykłe funkcje, możesz je tak wpisać. Ja

5:28wpiszę arrow function, czyli drugi parametr do then jest to funkcja, która się wykonana na reject,

5:32czyli na ewentualny błąd. Będę chciał,

5:36żeby ona przyjmowała jakiś parametr, który nazwę error i znowu będę chciał sobie wyszukać na

5:40stronie ten pre-39 i jego textContent ustawić

5:45na error message. Czyli z punktu widzenia mojego

5:49kodu, w tym miejscu będę miał błąd, więc

5:53wykonam sobie reject i przekaże tam nowy obiekt błędu, dzięki

5:57temu będzie on pod error i będę mógł skorzystać error message i również

6:01tutaj z punktu widzenia mojego kodu jest błąd, więc

6:06też wykonam sobie reject, okej. Jak

6:10zatem widzisz, jeżeli uda się wczytać Ajax'a, to wykona się tylko resolve i wtedy tylko

6:14nasza funkcja, która jest tutaj, powinna wykonać, więc spróbujmy sobie kliknąć

6:18teraz przycisk i zobaczmy. Dane się wczytały, a to oznacza, że

6:22po pobraliśmy dane z serwera i wykonała się funkcja resolve. Nigdy nie wykonała się

6:26funkcja podana tutaj, ale spróbujmy zepsuć ten adres. Pobierz

6:31i mamy wystąpił błąd. Dlatego, że tak naprawdę nasz Ajax wywołał tę

6:35funkcję onerror, a w niej wykonujemy reject, czyli kiedy wykonujemy reject, to

6:40oznacza wykonaj wszystkie za kolejkowanie tutaj funkcje,

6:44bo ich będzie mogło być więcej, o czym przekonasz się w lekcji kolejnej, więc w tej lekcji

6:48to wszystko, mam nadzieję, że taką podstawową koncepcję promise zrozumiałeś. Po

6:52prostu promise wywołane w ten sposób, zwraca nam jakiś obiekt, do którego można

6:57później przepisywać poprzez then i jeszcze kilka innych metod, takich handler'y,

7:01które się mają wykonać kiedy wykonamy funkcję resolve albo reject.