EcmaScript 6: Współpraca z generatorami

0:00W tej lekcji pokażę ci, na zakończenie nauki o promise, jak one świetnie

0:04mogą współpracować z generatorami. Widziałeś już przykład gdzie wykorzystaliśmy

0:08generatory i Ajax i dzięki temu mogliśmy sobie stworzyć jakby taką synchroniczną

0:13funkcję, która można powiedzieć, że pauzowała się i czekała aż otrzymamy

0:17odpowiedź, czyli pracowaliśmy z Ajax'em w taki sposób synchroniczny, a nieasynchroniczny. Było

0:23tam jednak sporo kodu i troszeczkę może dziwnie to wyglądało, natomiast w przypadku promise,

0:27będzie to można znacznie ułatwić i zrobić w sposób bardziej dynamiczny,

0:31więc teraz będę chciał ci to pokazać. Przejdźmy sobie zatem do kodu i mamy

0:35tutaj funkcję get json, którą mieliśmy wcześniej, ona operuje na promise, czyli

0:39nie będziemy jej zupełnie zmieniać. W tej funkcji fajne jest to, że ona

0:43po prostu jest uniwersalna i już w kilku lekcjach z niej korzystaliśmy i nawet w tej lekcji nie będziemy

0:47musieli zupełnie nic tutaj modyfikować. Natomiast po kliknięciu na przycisk chciałbym

0:52móc wywołać pewną funkcji generatora, którą za moment stworzymy. Powiem

0:57ci od razu jak chciałbym żeby ta funkcja wyglądała. Wpiszę ją tutaj na szybko w sposób anonimowy. Zaraz

1:01ją w pewne miejsce przekażemy. Pamiętasz, że z gwiazdką to jest generator i chciałbym

1:05móc mu przekazać jakiś adres URL i wewnątrz chciałbym móc pracować synchronicznie,

1:10to znaczy chciałbym napisać let json równa się get json

1:16i następnie URL. Natomiast przed tym zrobimy sobie yield, które

1:20już znasz i to oznacza, że z tej

1:24funkcji generatora zwrócimy to, co zwróci get json. Wiemy, że get json zwraca promise,

1:29więc zwrócimy to kiedy skorzystamy z iteratora i

1:33metody next. W razie czego sobie wróć do tej lekcji gdzie o tym mówiłem i

1:37tam dopiero wtedy, kiedy zrobimy sobie promise resolve, to wartość

1:41zostanie wstawiona w to miejsce. Zaraz to będzie dokładnie widać, ale piszę to

1:45w sposób synchroniczny, czyli mówię. Tutaj pobierz mi json, a w kolejnej linijce

1:49chciałbym sobie móc to wstawić na stronę do elementu pre-43

1:53textContent równa się json,

1:57czyli ja chcę wpisać kod w sposób synchroniczny i chciałbym, żeby to było na tyle

2:01uniwersalne, żebym mógł później napisać json 2 i tak dalej, ale do

2:05tego wrócimy, czyli musimy sobie tę funkcję gdzieś przekazać, dlatego

2:10wytnę ją i stworzę funkcję run. To będzie funkcja uniwersalna

2:14jak się przekonasz i jako pierwszy parametr będzie przyjmować generator. Przekażmy

2:18mu go tutaj, a jako drugi i każdy kolejny dowolne inne parametry,

2:22więc tutaj powiedzmy, że będziemy chcieli sobie przekazać parametr

2:26z adresem, pod który wysyłaliśmy wcześniej te zapytania. Okej,

2:33czyli naszym celem będzie stworzenie funkcji run, która przyjmie jako pierwszy parametr

2:38funkcje generatora, wywoła ją przekazując jej wszystkie parametry, które

2:42podamy tutaj. Czyli drugi, trzeci i tak dalej. Stwórzmy sobie ją zatem. Napiszmy run i

2:47pierwszy to będzie get, jak generator, czyli cała ta funkcja wpadnie mi pod

2:51gen, a drugi, trzeci i kolejny chcę sobie operatorem rest zebrać jako

2:55args i w środku będę chciał utworzyć iterator pisząc let it i pamiętasz,

3:02że tworzymy iterator wywołując generator, czyli skoro pod gen mam generator,

3:06to chcę go wywołać, ale że ten generator oczekuje, że będzie miał tutaj URL,

3:10to skąd go wezmę. Mam go w args i URL i każdy inny argument,

3:14który bym tutaj przekazał. Więc operatorem spread będziemy chcieli je

3:18tutaj wstawić. Mamy zatem pod it jakiś iterator. No i teraz jeżeli

3:22bym wywołał it next, to co się stanie w tym konkretnym przypadku. Otóż yield zrobi

3:28kiedy json i zwróci mi promise, więc teoretycznie gdybym napisał

3:32let p it next, to to zwróci nam obiekt, w którym mamy

3:36value i done, jak pamiętasz, więc po kropce jak się odwołam do value, to pod p powinienem

3:40mieć promise i zróbmy sobie console.log p. Ok,

3:44klikam przycisk i pod p mam promise, czyli na razie jest wszystko w porządku.

3:48Tylko, że teraz ja bym musiał wiedzieć, że mając już ten promise, żeby

3:53przejść tutaj do kolejnej linijki a pod to coś podstawić to muszę do tej promise

3:57przypisać sobie then, pamiętasz

4:01i na then wywołałbym sobie funkcję, która by

4:05mi zrobiła iterator next i to co byłoby tutaj, czyli

4:09jakiś json pobrany przekazała dalej. Jeżeli to za szybko

4:13teraz mówię, to też na spokojnie sobie to prześledź. To jest dokładnie to co do tej pory

4:17w poprzednich lekcjach pokazywałem, czyli jeżeli do promiski przypisze funkcję then,

4:21to mówię kiedy ona będzie mieć resolve, czyli w tym miejscu i przekażę

4:26jakieś dane, to ja chcę mieć te dane pod json i wywołać wtedy tę funkcję,

4:31a w tej funkcji wywołam iterator next przekazując mu json. Pokazywałem

4:35ci właśnie w lekcji, w której można było przekazywać do iteratora

4:39jakieś dane, do tej funkcji generującej tak naprawdę do środka, że tak to wygląda, więc

4:44jeżeli zrobimy yield get json, to zwróci nam to tutaj promise,

4:48ale kiedy później zrobimy iterator next i coś przekażemy, to wrócimy w

4:52to miejsce i w tym miejscu to postawimy, czyli już gotowe dane. No i gdybyśmy

4:56tylko tyle zrobili, to powinno nam to zadziałać. Zobaczmy, dane się wyświetlają,

5:01więc tak można stworzyć funkcję działającą synchronicznie. Z tym, że ja tutaj musiałem

5:05dokładnie wiedzieć, co jest w tej funkcji, Ile jest tutaj yield'ów. Natomiast teraz

5:09chciałbym ją zrobić w sposób dynamiczny, aby tutaj można było dodawać ile

5:14tylko chcę takich yield'ów i aby to wszystko działało już automatycznie, a więc

5:18zrobię funkcję run. Mam funkcję get json i nie chcę ich potem zupełnie zmieniać, a

5:22jedyne co chce zmieniać, to funkcje generatora. Żeby

5:27to zrobić usuniemy to co mieliśmy w tym miejscu i na górze gdzie utworzyłem zmienną it utworze

5:31jeszcze drugą, która będzie się nazywać result, ona nam zaraz będzie potrzebna

5:35i teraz utworzę sobie funkcję, którą nazwę next. Nie ma to nic wspólnego z

5:39next na iteratorze, możesz ją nazwać jak chcesz i będę chciał ją wywołać.

5:44I co ona zrobi? Wywoła nam iterator next i to

5:48co zwróci zapiszę nam do result, ale pamiętasz, że next

5:53może tutaj przyjmować jakieś wartości, które przekażemy do generatora, dlatego

5:57wpiszę sobie tutaj value i chciałbym żeby ona też przyjmowała value, czyli

6:01na razie prześledźmy raz jeszcze zdefiniowałem funkcje i ją wywołałem. Wykonamy

6:05zatem it next nie przekazałem parametru, więc ma tutaj on wartość undefined. Nic

6:10się nie wydarzy, po prostu wykona się ta linijka gdzie yield wyrzuci

6:14nam promise zwróconą w get json, czyli pod result będę miał

6:18obiekt, w którym jest done false, a value jest to ta promise. Raz

6:23tylko to wykonałem i teraz będę chciał sprawdzić czy result

6:27done nie ma jeszcze

6:31wartości true, czyli jeżeli jeszcze nie zakończyliśmy, bo tutaj na przykład jest jeszcze kolejny yield

6:35to znaczy, że chcemy wykonać jakiś kod. W tym

6:39miejscu będę chciał sprawdzić czy to co zostało zwrócone jest promise'm, czyli

6:43skąd będę to wiedział. Pod result jest cały obiekt, gdybyś zrobił console.log, więc

6:48result value to jest ta promiska. Jak sprawdzić czy to co zostało zwrócone

6:52z tego miejsca, czy to rzeczywiście jest promise, a nie jakaś inna wartość. Otóż

6:56zrobimy sobie tutaj coś takiego, if i wkleję

7:02to w tym miejscu, result value then i zrobimy

7:08na tym operator typeof, czyli jeżeli pod result value

7:12mam promise, no to then, powinno to być function, więc

7:16sprawdzam czy po prostu to co jest pod result value jest funkcją, czy

7:22zawiera then i czy jest to funkcja. Jeżeli tak, to wiem, że pracuje na promise. Przypiszmy

7:27sobie zatem do tej promise obsługę tego jakby handler'a then.

7:31Więc result value jest to promiska. Na then chcemy

7:35wywołać jakąś funkcję i teraz pytanie jaką. Tutaj się robi taka rekurencja,

7:39że można się w tym zagmatwać dlatego na spokojnie sobie na to wszystko patrz. W razie czego

7:44pauzuj, ale jeszcze raz gdybyśmy sobie to prześledzili. Przekazujemy

7:49tutaj generator. Wykonuje go w tym miejscu i mam iterator, definiuje

7:54funkcję next, nic się nie wydarzyło, ale teraz ją wywołałem, więc wywołaliśmy

7:58it next. To sprawiło, że ten yield się wykonał. Uruchomił

8:02tak naprawdę get json, który zwrócił promise i ten yield nam zwraca to promise do

8:06result. Ja sobie sprawdzam czy już zakończyliśmy, czy mamy done na true, nie. Więc

8:11teraz sprawdzam czy to co mi ten yield zwrócił, zawieramy metodę then. Okazuje się,

8:15że tak, więc wiem, że jest to promise. Dlatego wywołuje tę metodę then,

8:20tak jak to robiliśmy na promise'ach i mówię jeżeli ta promise będzie miała kiedyś w

8:24przyszłości status resolve i przekażę tam jakieś

8:28dane, to wtedy wywołaj moją funkcję przekazując jej te dane. A jaką

8:32funkcję tutaj podałem. Otóż tę samą funkcję next, a dane chcę mieć pod

8:36value, czyli jeżeli tutaj będzie resolve, to wykona się od

8:40nowa jakby ta funkcja next gdzie pod value będzie miała to, co nam już

8:44zwrócił Ajax i ona znowu wykona iterator next, przekazując

8:48mu te dane, a więc one wpadną w to miejsce, bo ten generator nam wyrzucił

8:52coś i czeka na kolejne użycie next żeby przyjąć jakąś wartość. Przyjmie

8:57wartość tego jsona tutaj i będzie sobie dalej wykonywał swój kod wstawiając

9:01json na stronę, więc tak to będzie wyglądać, ale on przy okazji zwróci

9:05nam kolejny obiekt, w którym będziemy mieli value. W

9:09tym przypadku już undefined i done to będzie

9:13nadal false, czyli nasz warunek jeszcze raz byś ją wykonał, ale że to co zostanie

9:17zwrócone nie zawiera już metody then, ta linijka nigdy się nie wykona i tak

9:21naprawdę nic więcej się tutaj nie wydarzy. Nie ustawimy kolejnego wykonania

9:25funkcji next. No więc sprawdźmy czy to zadziała, okazuje

9:30się, że tak, więc prześledź sobie to jeszcze raz w razie czego. Natomiast fajne jest to, że tutaj korzystamy

9:35tak naprawdę z takiej można powiedzieć o rekurencji i to o tyle jest

9:39przydatne, że jeżeli teraz chciałbym stworzyć zmienną json 2 i do

9:43tego URL'a na przykład dopisać sobie shuffle 1, wysłać

9:47kolejne zupełnie zapytanie, to tutaj cały czas pracuje synchronicznie. Tę funkcję

9:51mogę ukryć, powiedzmy, że w ogóle jej nigdy nie widziałem. Wiem tylko jak działa, tak

9:55samo tę, nie ma ich. Wpiszę sobie tylko taki kod mówiąc uruchom

10:00mój generator przekazując mu taki argument, pod URL, a w nim sobie

10:04piszę, że chce Ajax'em pobrać takie dane, takie dane i kiedy je mam,

10:08dopiero przechodzę do tej linijki, a w tej linijce mógłbym tak jak w poprzednich

10:12lekcji, wyświetlić dane i jedno i drugie, dlatego skopiuję teraz taki fragment,

10:17czyli w template stringu moglibyśmy wyświetlić

10:21to co jest w json, następnie dwa nowe wiersze, znak

10:25równa się 70 razy powtórzony, dwa nowe wiersze i json 2. Tylko w tej funkcji coś

10:30zmieniłem i udało mi się pobrać dwa niezależne, jak

10:34widzisz, zapytania wysłać do serwera, tutaj są rozdzielone i

10:38wszystko działa poprawnie, więc w ten sposób można również korzystać z generatorów. No

10:43i tą lekcją kończymy sobie poznawanie generatorów. Zobaczyłeś, że one są niezwykle przydatne,

10:47bo zwracają iterator i na przykład mogliśmy je dodać do naszej klasy po to,

10:51aby jeżeli ktoś wykorzysta na naszym obiekcie operator spread czy

10:55na przykład pętle for off. Żeby poszczególne elementy z tej naszej klasy zwracać. Natomiast

11:00okazuje się, że generatory są przydatne również w przypadku pracy w takim

11:04asynchronicznym kodem dzięki właśnie temu yield, które pauzuje wykonywanie

11:08dalszego kodu i jeśli odpowiednio do tego dopiszemy sobie taką funkcję, jak na przykład

11:13tutaj, to możemy pisać kod, który wygląda jak kod synchroniczny, a więc

11:17czeka aż otrzyma jakieś dane i dopiero wtedy przechodzi do kolejnej linijki.

11:21Wiem, że jest to temat dosyć skomplikowany, dlatego raz jeszcze na sam

11:25koniec zachęcam, na spokojnie przerób to sobie jeżeli nie wszystko dobrze zrozumiałeś,

11:29a tymczasem zapraszam cię już do kolejnych lekcji.