EcmaScript 6: Praca z wieloma promisami

0:00W tej lekcji pokażę ci jeszcze dwie metody statyczne na klasie promise. Jest to all oraz

0:04race i zobaczysz jak można z nimi pracować. Generalnie one pozwalają pracować

0:09na wielu promise'ach jednocześnie, więc mamy tutaj ten sam kod, który wcześniej get json

0:13i chciałbym po kliknięciu w przycisk wykonać sobie kilka zapytań Ajax. Więc

0:17napiszę promise all i tutaj musimy podać tablice albo

0:21dowolny iterable, czyli coś co ma w sobie iterator, ale tablica ma, więc

0:25nie ma żadnego problemu i zazwyczaj będzie to tablica i w tej tablicy możemy podać dowolną

0:30liczbę promise, więc get json jeśli pamiętasz, czyli nasza funkcja get json

0:35ona zwraca promise, więc jeżeli ją wywołamy no to tutaj podstawiamy bezpośrednio promise

0:39i chciałbym teraz tutaj wstawić sobie get json z takim

0:44adresem jak mieliśmy wcześniej z parametrem shuffle 1 żeby te dane były pomieszane i po

0:49przecinku postawię sobie drugą taką linijkę, a więc w konsekwencji

0:53wywołując tą funkcję podstawiamy tutaj dwie promiski i teraz do tego

0:57promise all będę mógł przypisać sobie handler'y, tak robiliśmy to już wcześniej, czyli napiszmy

1:02sobie then. Kiedy wszystko będzie okej, będę chciał mieć pod zmienną data coś.

1:06No właśnie i co to będzie. Okazuje się, że w tym przypadku będzie to tablica, w

1:10której będziemy mieli wyniki tych dwóch promise. Natomiast promise all wykona

1:15się tylko wtedy, czyli then wykona się tylko wtedy, jeżeli obydwie

1:19będą miały status resolve, czyli nie będzie tam żadnego błędu, a więc innymi

1:23słowy, w ogóle ten kod jakby poczeka na to aż uda się

1:27pobrać jeden zasób serwera i drugi. Generalnie w tym przypadku jest

1:31to zasób serwera, ale chodzi generalnie o to, że ma to być funkcja resolve wykonana

1:35i to co ona zwróci z pierwszej promise będziemy mieli w data zero,

1:40bo będzie to tablica, a to co z drugiej będzie w data 1. Jeżeli wiem, że są tutaj dwie

1:44promiski, to wiem, że będą dwa elementy tablicy. Dlatego tą funkcję

1:48sobie zapiszę tak, żeby była trochę bardziej czytelna, a na stronie wyszukamy sobie elementu pre-42

1:53i za jego pomocą będziemy chcieli na stronie wyświetlić to,

1:57co zostanie nam zwrócone. Zróbmy to w formie takiego template string'u i wyświetlimy najpierw

2:01to co będzie pod data 0. Czyli to co z pierwszej promise jakby zwrócone. Następnie postawię

2:07sobie dwa znaki nowego wiersza i zrobimy sobie data 1,

2:11ale żeby jeszcze jakoś rozdzielić, to pomiędzy może zróbmy

2:15sobie coś takiego, że postawimy na takie wyrażenie w

2:19tym template string'u, gdzie będzie równa się i metodą repeat, którą już ci pokazywałem

2:23powtórz mnie to sobie może 70 razy i dodajmy jeszcze dwa

2:28znaki nowego wiersza. Dziwnie wygląda, ale to nam fajnie wszystko sformatuje, więc

2:32sprawdzimy teraz czy to zadziała. Pobierz dane. Widzimy, że się udało. Dwa zapytania

2:37zostały wysłane i gdzieś pomiędzy tutaj powinno to być rozdzielone. Jak widzisz, właśnie siedemdziesięcioma

2:42znakami równa się i mam wynik dwóch promise. Ważne jest jednak to,

2:46że jeżeli jedna z nich miała by status rejected, byłby jakiś błąd, to wtedy od

2:50razu wykona nam się blok catch, który moglibyśmy mieć w tym miejscu. Jeżeli

2:54pierwsza będzie miała rejected, to na drugą nawet nie będziemy czekać. Od razu jakby skoczymy

2:58do catch. Dlatego tutaj wstawię sobie taki fragment, który już

3:03wcześniej widzieliśmy, czyli funkcja arrow, która

3:07wyświetli error message, więc zróbmy sobie błąd tutaj w jednej z nich w adresie. Spróbujmy

3:13wysłać. Pobierz dane i mamy wystąpił błąd. Pamiętaj jednak, że ten

3:17błąd zależy od nas. To ja powiedziałem kiedy ma być zrobione reject. Na podstawie

3:21błędu Ajax'a wcale nie musiałbym tutaj tego robić. Teraz pokażę

3:25ci drugą metodę, która pozwala pracować na wielu promise'ach i jest to metoda race. Na

3:30początku ona się wydaje mało przydatna, ale ja pokażę ci praktyczny przykład. Wpiszemy

3:34sobie promise race i podobnie jak w all podajemy jakiś iterable, który

3:39zawiera w sobie kilka promise. Więc będę chciał tutaj zrobić dokładnie to

3:43samo co wyżej, erase polega na tym, że jakby te dwie promise'y

3:47się ścigają ze sobą. Która się zakończy pierwsza, tej wynik zostanie nam zwrócony

3:51do then. Więc jeżeli tutaj zrobimy then będę miał powiedzmy jakiś

3:55json i chciałbym na stronie móc go wyświetlić w taki sposób. No i

4:01mógłbyś zapytać po co mi tak naprawdę dwie promiski, które się ścigają. Zaraz

4:06ci pokażę praktyczny przykład, ale jeszcze tylko wspomnę o tym, że która z nich skończy pierwsza, to

4:10ta będzie tutaj. No i od razu jakby już nie czekamy zupełnie na wynik drugiej. Okej,

4:15zobaczmy. Pobierz dane. No i pierwsza się

4:19zakończyła i od razu mamy jej wynik. Natomiast ważne jest również to, że podobnie

4:23będzie z catch. Jeżeli tutaj przypiszemy sobie catch, zróbmy

4:29to samo, co wcześniej, bo jeżeli któraś będzie miała błąd,

4:33to na tą drugą już nie będziemy czekać. Zobaczmy. Wystąpił

4:37błąd, czyli to oznacza, że jak pierwsza ma błąd to wyścig jest zakończony, bo

4:41tutaj nie mówimy, że czekamy, która pierwsza zrobi resolve, tylko

4:45czekamy, która pierwsza zrobi resolve albo reject, okej i

4:49teraz pokażę ci praktyczniejszy przykład, bo owszem, jeżeli gdzieś w swoim projekcie

4:53jakimś będziesz wiedział, że są jakieś dane i zależy ci, że albo jedne mają być pobrane

4:57albo drugie i które szybciej, to będziesz o tym pamiętał, natomiast takim praktycznym przykładem

5:02może być tutaj stworzenie timeout'u. No i teraz będę chciał ci to pokazać. Skopiuję

5:07sobie to wszystko i wykomentuje i tutaj podstawimy sobie promise,

5:11czyli mówię pobierz mi takie oto dane, ale jako drugi promise chcę podstawić

5:15inną promiskę zupełnie, która będzie zwrócona z funkcji timeout, którą sobie

5:19utworzymy. Ta funkcja przyjmie parametr 500 i coś mi tutaj zwróci. Ma tutaj

5:24zwrócić promise, bo to muszę podać do tej tablicy. Więc utwórzmy sobie taką funkcję

5:28timeout. Zaraz się to wyjaśni. Jako parametr przyjmie czas

5:32w milisekundach. Podałem tutaj 500. Wewnątrz będziemy chcieli

5:37utworzyć nową promise. Nie muszę jej robić do zmiennej p, tak jak robiłem wcześniej. Mogę

5:41ją od razu zwrócić new promise. Pamiętasz, że promise

5:45przyjmuje funkcję, która będzie miał będzie miała resolve i reject i tutaj

5:52sobie ustawię timeout. Zrobimy settimeout, jest to funkcja, która

5:56pozwoli mi po jakimś czasie coś wykonać i tutaj podaję funkcję, zaraz ją uzupełnię,

6:00a tutaj czas, czyli czas to będzie 500 milisekund, a więc mówię wykonaj

6:05mi coś po 500 milisekundach. Tutaj będzie zwrócona promise, bo zrobiłem return new promise,

6:09nie ma problemu, ale wewnątrz tej funkcji po 500 milisekundach chciałbym

6:13wykonać funkcję, która zrobi mi reject

6:19i przekaże tam nowy obiekt błędu, czyli new

6:24error i napiszemy sobie tutaj, że czas

6:28i tutaj podstawmy dynamicznie ms, ms,

6:32czyli czas na przykład 500 ms. Został przekroczony, okej.

6:38Mam nadzieję, że ma to dla ciebie sens. Wykonamy to sobie i wytłumaczę ci raz jeszcze jak

6:42działa. Pobierzemy i wszystko jest okej, ale jeżeli ustawię tutaj wartość na

6:4610, czyli 10 milisekund. Nagle się okaże, że czas

6:5010 milisekund został przekroczony, czyli za pomocą takiego race i dwóch różnych promise

6:54mogę tutaj powiedzieć pobierz mi te dane, ale nie będę czekał więcej niż

6:5810 milisekund na takie dane. Natomiast jeżeli z powrotem to zmienimy na przykład

7:02na sto i odświeżę, wszystko jest okej i gdybyśmy tutaj sobie zrobili

7:08teraz jeszcze i podejrzeli to zapytanie, to w zakładce timing

7:13możemy zobaczyć ile ono trwało, 21 milisekund. Natomiast czasami może

7:17trwać zdecydowanie dłużej, zależy jak obciążony jest serwer, jak daleko się od nas znajduje. Dlatego

7:22możemy sobie w ten sposób zrobić timeout i teraz prześledźmy na koniec o co tutaj chodzi. Mówiłem

7:27ci, że race nie liczy się tutaj czy będzie resolve czy

7:31reject. Ta promise, która zakończy pierwsza, to będzie

7:35taki hunter wykonany, czyli jeżeli ta będzie miała resolve to wykonujemy

7:40then i nie czekamy na tą, ale jeżeli z kolei ta będzie miała albo ta reject, to

7:44od razu wskakujemy sobie do catch i dlatego ta promise się nam wywołuje

7:49czy robi się resolve. Jak widzieliśmy w zakładce timing po 23 sekundach,

7:54bo tyle musieliśmy czekać na odpowiedź i dopiero wtedy onload się wykonało, a co

7:58za tym idzie resolve. Natomiast wcześniej, po czasie, który ja podałem, czyli 10

8:02milisekundach, wykonała się druga promise, którą podałem tutaj. To jej ustawiłem

8:06settimeout. No i skoro ona zrobiła reject, to już nie czekamy na taką promise, która

8:11była tutaj, więc jest to myślę praktyczny przykład jak można wykorzystać promise race.

8:15Natomiast promise all, tutaj nie potrzebujemy jakiegoś innego praktycznego przykładu. Na

8:20pewno się domyślasz, że zdarzają się sytuacje, gdzie chcemy na raz pobrać kilka różnych danych

8:24z różnych adresów i dopiero kiedy mamy wszystkie, to jakoś się wyświetlić. Na

8:28przykład kiedy pracujemy z API, gdzie pod jednym adresem pobieramy użytkowników, a pod

8:32drugim na przykład listę jakiś zakupów, to będzie to na pewno bardzo

8:37przydatne. No i to by było tyle w tej lekcji, a w kolejnej pokażę ci jeszcze chyba

8:41najciekawszą rzecz, mianowicie jak możemy pracować z generatorami i współpracować

8:46jednocześnie z promise.