EcmaScript 6: Przekazywanie wartości

0:00W tej lekcji  pokażę ci, że do generatorów można przekazywać wartości przy

0:04każdym użyciu next. Pokazałem ci, że pętla for of czy

0:08operator spread, one same jakby wykonują next, ale i my również możemy to zrobić, co

0:12będę chciał ci teraz pokazać. Utworzymy sobie funkcję generatora, którą nazwę it i będzie

0:18ona oczywiście z gwiazdką i w środku chciałbym zrobić coś takiego, let result, czyli

0:23stworzyć sobie zmienną, w której będziemy mieli coś takiego, yield plus

0:27number, na przykład razy 2. Bardzo

0:32dziwnie to wygląda, ale zaraz sobie do tego przejdziemy, a później będę chciał zrobić yield result, tu

0:36jeszcze możemy zrobić console.log, druga

0:43linijka, żeby zobaczyć w konsoli, kiedy tak naprawdę kod dojdzie do

0:47wykonywania tej linijki kodu i teraz jest to generator, więc musimy z

0:51niego utworzyć iterator, wywołując funkcje it. To nam zwróci

0:56iterator, który pamiętasz, będzie miał w sobie na przykład metodę next i

1:00teraz jeszcze, tutaj na górze dodam sobie number, dlatego że widzisz skorzystałem z takiego parametru

1:05i powiem ci gdzie go można przekazać. Otóż przy woływaniu tej funkcji na początku. Przekażę

1:10sobie piątkę i ona będzie zapamiętana tutaj pod number i teraz, co się tutaj

1:14daje stanie. Otóż nic. Żebyśmy doszli w ogóle do wykonywania kodu,

1:18w którym jest yield, w takiej linijce, to musimy napisać iterator next.

1:23Zróbmy

1:27sobie to w konsoli. Żeby zobaczyć co tutaj zostanie zwrócone, okej. Widzimy,

1:33że jest to obiekt, gdzie ma value 10 i done równa się false. Dlaczego value

1:37to jest 10? Dlatego, że przekazałem piątkę i 5 razy

1:412 jest to 10, a jest yield po prostu to zwróciło. Natomiast gdybym chciał i

1:45taki jest nasz cel. W miejscu gdzie jest yield, podstawić jakąś wartość, którą

1:49będziemy mogli przekazać, to akurat w tym konkretnym przypadku muszę sobie to zawrzeć w takich

1:53nawiasach, nie zawsze jest to potrzebne, tylko chodzi o to, że tutaj to yield

1:57jakby zwróciło nam number razy dwa i na początku jeszcze plus, więc

2:02nic tutaj się takiego nie stało, ale jeżeli tak zrobię, to zmieni się już całkowicie to

2:06wykonanie. Jak widzisz teraz value ma wartość undefined i po co nam

2:10jest to yield w takich dziwnych miejscach. Otóż w momencie kiedy wywołujemy next to

2:15możemy podać jakąś wartość. Pierwsze wykonanie yield, tak

2:19naprawdę przejdzie w to miejsce i coś nam zwróci. Nie interesuje mnie to co jest tutaj i

2:23na razie się tym nie przejmuj, bo jeszcze będziesz widział w lekcji gdzie będzie mówić

2:27o współpracy promise z generatorami, w jaki sposób to dokładnie działa. Tutaj

2:31chcę tylko pokazać na szybko koncepcję. Otóż wywołamy sobie raz jeszcze

2:36tę linijkę, ale będziemy chcieli przekazać

2:40jakąś wartość i ja sobie tutaj przekażę dwa. Prześledźmy, co się stanie. Pierwsze

2:44użycie, iterator next. Będzie sobie to parsować, dojdzie do tego momentu, yield i zwróci

2:49nam to, co jest przy tym yield'zie, ale że go oplotłem takimi nawiasami, no to nie

2:53będziemy mieli nic zwrócone. Tak jak widzieliśmy, będzie to undefined. W drugim przykładzie,

2:57tutaj w drugiej linijce, kiedy wykorzystam iterator next i przekaże jakiś parametr,

3:01jakąś wartość, to ona wpadnie pod yield. Zostanie tutaj podstawiona dwójka. Number

3:06to było 5, czyli tutaj będzie 5 razy 2 jest to 10

3:11i do tego dodamy dwójkę i dopiero to jakby zostanie zapisane w zmiennej result.

3:15Wykona się nam console log druga linijka i yield zwróci nam cały ten wynik. Wiem,

3:20że wygląda dziwnie, ale zobaczmy. Rzeczywiście value jest to 12 i done jest

3:24to false. W ten sposób to wygląda. Kod, druga linijka również się

3:28wykonał, czyli to pokazuje, że możemy do generatora za pomocą next przekazać

3:32jakąś wartość, która wpadnie jakby w miejsce gdzie było yield. Na

3:37razie nie wydaje się to użyteczne. Pokazałem ci tylko najprostszą koncepcję. Dlatego zróbmy

3:41sobie troszkę bardziej zaawansowany przykład z Ajax'em, ale nie będę go w 100%

3:45dokładnie tłumaczył dlatego, że będziemy jeszcze korzystać z promise i tam będzie

3:49to wszystko naprawdę bardziej widoczne i lepsze w życiu. Dlatego

3:53ja sobie wkleję tutaj funkcję, którą

3:58nazwałem Ajax. Ona przyjmie jakiś adres URL, utworze nowy obiekt do Ajax'a

4:03i otworzy go na tym URL'u i go zwróci, czyli jeszcze

4:07nie przypisze żadnego zdarzenia, po prostu zwróci ten obiekt i teraz będziemy sobie chcieli

4:11utworzyć funkcję generującą, którą nazwiemy sobie showData, więc napiszę showData i

4:17chciałbym, żeby to był generator, więc tutaj sobie podam gwiazdkę

4:21i przy jego wywołaniu podamy mu jakiś adres URL i teraz

4:26chciałbym, żeby ta funkcja zachowywała się w sposób synchroniczny. Jeżeli pracowałeś

4:30kiedykolwiek z Ajax'em, tak jak mamy tutaj, to wiesz, że będę mógł za moment przypisać zdarzenie

4:34onload, które się wykona za jakiś czas, kiedy dane zostaną pobrane

4:38z Internetu i dopiero wtedy wykona się funkcja callback. Ja jednak chciałbym w tym generatorze

4:42pracować w sposób synchroniczny. Czyli napisać yield result równa się

4:46czy let result, równa się i tutaj jest yield

4:50Ajax i przekazać mu i URL. Chciałbym,

4:55żeby on mi zwrócił już gotowe dane, które mogę sobie wstawić na stronę, więc napiszę

5:00sobie document querySelector pre-35

5:07textContent równa się result. Tutaj mamy

5:12index html, dodamy sobie tutaj element pre-35,

5:16jak nasz przykład i do niego będziemy chcieli to dodać. Więc wiem, że jeszcze

5:21na razie nie ma to sensu, ale zobacz czy nie fajnie byłoby móc pracować z Ajax'em tak, że

5:25w tej linijce mówię wyślij mi zapytanie Ajax i jak coś otrzymasz to wykonaj

5:29dopiero drugą linijkę. Wiemy, że generatory pozwalają na pauzowanie wykonywania funkcji. Właśnie kiedy

5:34zobaczą yield. Z tego powodu musimy utworzyć jeszcze jedną

5:38funkcje i zapewniam cię, że później w przypadku promise będzie to prostsze, ale chcę ci na razie wytłumaczyć

5:42koncepcję. To już będzie zwykła funkcja, którą nazwy makeRequest. Ona będzie

5:48przyjmować adres URL i jakąś funkcję generatora. Konkretnie to

5:52showData będzie tam przekazane. Na początek będę chciał stworzyć z generatora iterator,

5:56więc wiem, że musimy generator wywołać i będzie on pod tym parametrem,

6:01więc napiszmy URL, przekazując mu ten URL, bo on go tutaj oczekuje i żeby

6:05w ogóle jakiś kod tym generatorze się wykonał, gdzie mamy yield, to będziemy musieli na

6:09nim napisać it next. Natomiast, na

6:13pewno pamiętasz, że kiedy wykonam it next, to zostanie z generatora coś

6:18zwrócone i właśnie tutaj, gdzie jest yield ajax. On wywoła funkcję ajax

6:22przekazując jej URL i pamiętaj, co ona robi. Ona zwraca obiekt xhr, więc

6:26cały ten yield wyrzuci nam obiekt xhr, kiedy użyjemy it.next.

6:30Dlatego ja sobie go zapisze tutaj, w ten sposób. Tylko

6:35warto jeszcze pamiętać, że it.next zwróci nam ten obiekt, w którym jest value i done, więc

6:40chcę się odwołać do value i to mi zwróci to co jest w tym miejscu, a w

6:44tym miejscu będzie zwrócone xhr, to zostanie wyrzucone i funkcja zostanie zapauzowana.

6:48No i jesteśmy w tym miejscu, w makeRequest i do tego obiektu xhr będę

6:52chciał przypisać zdarzenie onload, czyli kiedy uda się pobrać

6:57dane z internetu, to wtedy będziemy chcieli jeszcze sprawdzić czy xhr

7:01status równa się 200, taki standardowy Ajax. No i

7:05jeżeli tak i to jest niesłychanie ważne, to będziemy chcieli przejść do kolejnej

7:09linijki w generatorze i pamiętasz jak to zrobić, na tym iteratorze napiszemy next. Natomiast

7:15właśnie dlatego pokazałem ci ten pierwszy przykład u góry, że przy next możemy coś przekazać, bo

7:19teraz to, co ja przekażę w tym miejscu, zostanie podstawione tutaj, przy tym yieldzie, czyli yield

7:23nam wyrzucił i czeka kiedy wykonamy next

7:27i coś przekażemy, to wracamy w to miejsce i podstawiamy za całe to wyrażenie. Więc

7:32co tutaj chce podstawić. Otóż to, co zwrócił mi ajax, czyli xhr responseText. Jeżeli

7:40pracowałeś z Ajaxem, to doskonale wiesz, co tutaj się dzieje okej i teraz

7:44jeszcze musimy wysłać to zapytanie, czyli xhr send, w ten

7:48sposób i teraz pozostało wywołać funkcję makeRequest, podając jej adres

7:52URL, więc napiszmy sobie tutaj makeRequest. Adres

7:58URL ja sobie skopiuję. Przygotowałem pod

8:03takim adresem json, który będzie zwracany, a jako drugi parametr musimy

8:07przekazać funkcje generatora, którą mamy tutaj, czyli showData. Na

8:11spokojnie sobie to prześledź, zobaczysz o co chodzi. Wywołujemy makeRequest, podajemy adres

8:15i showData. Wpadamy tutaj, tworzymy nowy generator czy wywołujemy

8:19generator podając mówił URL. On nam zwraca iterator. Wykonujemy na nim next.

8:24Wykonuje się yield i zwraca nam to, co jest tutaj, a tutaj przekazując URL

8:29dalej, zostanie zwrócony obiekt xhr, dlatego pod value go mam. Przypisuje

8:33do niego zdarzenie, że kiedy wszystko się pobierze poprawnie z internetu, to chcę dopiero

8:37wtedy wywołać next. Kiedy wywołam next, wracamy do wykonywania tej funkcji.

8:41Może to być nawet 10 minut później, nie ma żadnego znaczenia. Wtedy

8:46odpauzowana zostanie ta funkcja i to przekazałem będzie tutaj, czyli będę

8:50miał wynik właśnie tego ajax'a i dzięki temu będę mógł go wstawić na stronę

8:54w taki sposób. A zatem w tej funkcji pracuje sposób synchroniczny, bo stworzyłem

8:58dodatkowe funkcje. Wydaje się, że jest dużo kodu, dlatego zobaczysz

9:02później w przypadku promise, że też będzie to znacznie uproszczone. Upewnijmy się jednak,

9:06że to działa i po odświeżeniu widać, że dane są wczytywane i wstawione na stronie

9:10poprawnie. Zatem z tego przykładu zapamiętaj, że możemy do generatora

9:15przekazywać za pomocą next jakieś wartości, a za pomocą yield

9:19one są do nas wyrzucane. Czyli mamy taką dwukierunkową komunikację, iterator,

9:24w tym przypadku tutaj, w tym generatorze wyrzucił nam coś i czeka kiedy

9:28wykonamy next i coś podstawimy, to wstawimy to w to miejsce. Na spokojnie

9:33sobie zatem prześledź ten przykład. Natomiast w kolejnej lekcji pokażę ci jak możemy obsługiwać

9:38błędy wewnątrz funkcji generatora.