EcmaScript 6: Łączenie łańcuchowe

0:00W tej lekcji pokażę ci, w jaki sposób możemy łączyć promise'y w taki sposób łańcuchowy,

0:04czyli przypisywać odpowiednie handler'y, mamy tutaj przykład identyczny, jak w lekcji poprzedniej, więc

0:09jeżeli bym tej odświeżył kliknął przycisk pobierz dane, to są one poprawnie pobierane

0:13i nie ma tutaj nic nowego. Pokazywałem ci, że do promise, do tego

0:17obiektu zwróconego tutaj, możemy za pomocą metody then przypisać handler'y,

0:22czyli takie funkcje, które się mają wywołać na reseolve albo na reject i pierwszy

0:26parametr do then oznacza, że jest to funkcja na resolve, a drugi

0:30na reject. Natomiast nie musimy nawet tego zapisywać w taki sposób, możemy

0:34zrobić to trochę inaczej, otóż mamy metodę i to sobie zapiszę

0:38może w takiej formie. Tutaj nawet nie jest potrzebny ten nawias, okej

0:43mamy jeszcze jedną metodę, którą chcę ci teraz pokazać,

0:47więc tutaj nie mogę mieć średnika na końcu i jest to metoda catch. Oczywiście

0:52wszystkie te nowe znaki, które ja tutaj robię, czyli na przykład enter. One

0:56w JavaScripcie nie mają znaczenia, więc tylko dla czytelności i teraz o ile metoda

1:00then przyjmuje jako pierwszy parametr funkcji na resolve, a drugi na reject, to metoda catch przyjmuje

1:06jeden parametr i jest to właśnie ta druga funkcja, którą można było przekazać do then,

1:10czyli ta funkcja na reject. Zapiszmy ją sobie sobie zatem tutaj i sprawdzimy

1:14czy efekt byłby taki sam. Pobierz dane jest wszystko

1:18okej. A jeżeli zmienimy adres na niepoprawny, pobierz dane wystąpił

1:22błąd, więc możemy łańcuchowo to łączyć właśnie z tego powodu, że metoda then

1:26gdzieś tam wewnętrznie dalej zwraca ten obiekt promise, więc dalej do niego

1:30możemy przepisywać catch. Chciałbym ci teraz jednak pokazać, że możemy

1:34łączyć również kilka zapisów then. Co się dzieje tutaj, gdybyśmy

1:39sobie sprawdzili czym jest json są pobrany z serwera. Jest to zwykły string i teraz

1:43zazwyczaj taki json chcemy zamienić na obiekty JavaScript'owe za pomocą

1:47json parse, więc gdybym tutaj chciał napisać kolejny then i chciałbym,

1:53żeby on otrzymywał już dane w formacie właśnie JavaScript'owym,

1:57więc napiszę sobie na przykład obj, bo będzie to jakiś obiekt i chciałbym żeby

2:01on go przyjął i żeby go wyświetlił na początek może w console.log'u. No

2:05to zobaczymy, co tutaj się wydarzy. Okaże się, że mamy

2:11błąd, bo jeszcze tutaj musimy poprawić sobie http, ale

2:16jak widzisz otrzymaliśmy zwykły

2:21string. Czyli co tutaj się wydarzyło. Mianowicie na początek udało

2:25się wszystko poprawnie pobrać i wstawić do tego elementu pre, ale

2:29później kiedy dodałem następny then to automatycznie te same dane zostały

2:33mi przekazane tylko tutaj nazwałem inaczej parametr, więc cały czas jest to string. Ale

2:37w ten sposób mogę sobie łańcuchowo połączyć kilka wywołań, w konsoli ten string się wyświetlił,

2:42ale żeby to był JavaScript'owy obiekt, to okazuje się, że można zrobić tak i zapisze tą

2:47funkcję może w takim formacie, żeby ona dla nas była bardziej czytelna. Okazuje

2:52się, że można z jednego handler'a do dodanego do then coś

2:56zwrócić i to co zwrócisz będzie w kolejnym then pod zmienną,

3:00którą sobie tutaj zdefiniujesz. Jeżeli zwrócę jeden, to tutaj będę miał jeden. Sprawdźmy czy

3:04tak by się stało. Pobierz dane. Widzimy 1. Czyli

3:09jeżeli nic nie zwrócisz, to te same dane są przekazywane dalej, a jeżeli zwrócisz

3:13coś. To to się pojawia tutaj. Dlatego skoro tutaj ten tekst wstawiłem sobie na

3:17stronę, to chciałbym go zamienić na obiekt JavaScript'owy metodą parse

3:21na obiekcie json i zwrócić i to już zwraca utrata prawdziwy JavaScript

3:25obiekt, który tutaj pod Object powinien się pojawić. Sprawdźmy. Okazuje

3:30się, że jak najbardziej i teraz mógłbym sobie z nim coś zrobić i na przykład jakoś jego dane

3:34wyświetlić. Takich wywołań then może być oczywiście więcej.

3:38Natomiast to co jest ciekawe, to jeżeli wystąpi błąd to ominiemy wszystkie

3:43then i wywołamy tylko catch. Zauważ, jeżeli tutaj sobie popełnimy błąd, w ten

3:47sposób. Spróbuję to wysłać. Od razu mamy Wystąpił błąd. Dlatego dobrym

3:51pomysłem jest dodawanie sobie catch gdzieś na końcu. Jeżeli błąd się pojawi, to

3:55tutaj można go przechwycić. Natomiast mam dla ciebie jeszcze jedną ważną wiadomość. Otóż nie

4:00tylko, jeżeli tutaj zrobimy reject, to wywoła się catch, catch się wywoła

4:05również wtedy, kiedy w dowolnej funkcji przypisanych do tych handler'ów pojawi

4:09się błąd, czyli gdybym na przykład w tej funkcji chciał zrobić console.log,

4:13w ten sposób. Może ją zapiszmy tak, ale

4:20dodatkowo zrobiłem throw new error, wystąpił

4:27inny błąd, to zauważ co się stanie. Przejdźmy

4:32tutaj, pobierz dane i mamy wystąpił inny błąd. Czyli catch przechwyci

4:36nam również błędy, które pojawią się wewnątrz funkcji obsługujących właśnie,

4:40na przykład sukces, czyli nie tylko wtedy jest catch kiedy wykonasz reject. Warto

4:45o tym pamiętać, chociaż na razie to wykomentuje i na koniec tej lekcji jeszcze

4:49jedna bardzo ważna rzecz. Pokazałem ci, że w takiej promise możesz coś zwrócić, na przykład

4:53json i to będzie po kolejnym parametrem, w kolejnej funkcji then, ale okazuje

4:57się, że możesz z takiej funkcji zwrócić również kolejną promise i dopiero kiedy

5:01ona będzie miała status resolve, czyli zostanie na niej wykonana funkcja resolve,

5:05dopiero wtedy wykona się kolejny then, do którego to co ona będzie mieć w resolve,

5:10zostanie przekazane. Jak zatem możemy to zasymulować, otóż zróbmy

5:14sobie tutaj return get json i podajmy ten sam adres, ale

5:19żeby on wrócił troszeczkę inne dane, to możemy do niego dodać parametr shuffle. Na

5:24serwerze tak to zrobiłem, że jeżeli podamy shuffle 1, to one będą po prostu pomieszane, to

5:28będą troszeczkę inne dane i teraz zastanówmy się co ja zwracam, wywołuje get json, a

5:33ta nasza metoda zwraca promise i to jest super ważne, więc

5:37ja zwracam nową promise z tego zapisu i okazuje się, że dopiero kiedy ona

5:42będzie miała status resolve, bo na samym początku, kiedy tworzymy nową promise ma ona

5:46status pending, a kiedy się już uda zrobić resolve albo reject to ma

5:51status resolve albo rejected, więc kiedy

5:56ona będzie miała resolve dopiero wtedy wywoła się ten then i do niego zostanie przekazany

6:00to, co ona przekazywała, więc to już nie będzie ten json parse tylko znowu zwykły

6:04string. Zobaczmy czy faktycznie ma to sens okazuje się, że tak

6:08natomiast gdyby z kolei w niej pojawił się jakiś błąd, bo ona miałaby niepoprawny

6:13adres, wtedy wywoła się on error i zrobimy w niej reject, to

6:17jest jakby zupełnie nowa promise, to wykona się też nasz catch, sprawdźmy.

6:21Widzimy wystąpił błąd, tak zapamiętaj sobie, że po pierwsze możesz tak

6:25kaskadowo łączyć wszystkie te then'y i jak z jednego coś zwrócisz to w drugim już możesz

6:29na tym pracować, ale dodatkowo możesz zwrócić nową promise i dopiero

6:34od jej resolve albo reject należy czy dalej wykona się twoje then

6:38i z jakimi danymi czy wykona się funkcja przypisana do catch.