EcmaScript 6: Metody statyczne Promise

0:00W tej lekcji pokażę ci, że klasa promise ma również pewne

0:04metody statyczne, z których możemy skorzystać i zaczniemy sobie od jakiego przykładu jak

0:08już mieliśmy wcześniej, czyli funkcja get json. W momencie kiedy kliknę przycisk pobierzemy

0:12dane jsonem i wyświetli menu ja na stronie, więc zobaczmy klikam

0:16pobierz i dane się wyświetliły. Natomiast co się dzieje jeżeli kliknąbym pobierz

0:20drugi raz. Jeżeli w konsoli zaznaczysz sobie opcje LogXMLHttpRequest

0:25to będziemy widzieć wszystkie wysłane zapytania, więc jeżeli tutaj bym sobie

0:29kliknął pobierz dane, to widzimy, że raz jeszcze wysłaliśmy zapytanie do serwera

0:34i te dane raz jeszcze tutaj wstawiliśmy. Natomiast chciałbym zrobić taką opcję,

0:38że jeżeli dane zostały już pobrane, to chcę je zapisać pamięci podręcznej. Natomiast

0:42nie chciałbym musieć modyfikować tego kodu, który korzysta z then i catch. Dlatego

0:47utworze sobie na samej górze naszego zakresu stałą jak

0:51pamięć podręczna. Pamiętaj, że wszystko co tutaj tworzymy to są

0:55globalne funkcje, bo nie ograniczyłem tego zakresu, ale robię to wyłącznie dla czytelności naszego

1:00przykładu w kursie. Normalnie warto byłoby, żeby coś takiego jak catch nie

1:04było widoczne na całej stronie, ale będzie to taki oto obiekt i teraz będę

1:08chciał zrobić tak, że na samym początku kiedy wywołujemy get json, chciałbym

1:12sprawdzić czy w tym obiekcie cashe znajduje się już

1:16pod kluczem adresu URL coś, czyli jeżeli wywołamy get json

1:21z jakimś adresem URL drugi raz, to powinno coś być w tym catch, bo zaraz pogadamy, czyli

1:25jeżeli to nie jest równe undefined to

1:30będę chciał coś zrobić i konkretnie będę chciał wtedy zakończyć

1:35i napisać tutaj jeszcze zwracam

1:40dane z pamięci podręcznej. Natomiast

1:46na razie nam to wygeneruje błąd, ale o co chodzi. Wyobraźmy sobie, że wywołujemy

1:50ten get json przekazując URL. Sprawdzimy czy tutaj URL

1:54to nie jest undefined. To będzie wartość undefined, bo nic tutaj nie ma, więc pominiemy ten blok kodu. Chodzi

1:59mi o to, że w momencie kiedy pobiorą się te dane i przekażemy je do resolve, to

2:03żeby zrobić sobie cashe url równa się xhr responseText, czyli

2:09po prostu chcę cały ten tekst pobrany z serwera zapisać sobie w tym obiekcie, więc

2:13sprawdzimy czy rzeczywiście nam się to uda. Pobierz dane wszystko działa

2:17poprawnie, ale spróbujmy raz jeszcze sobie wywołać tę funkcję klikając

2:21i teraz będziemy mieli zwracam dane z pamięci podręcznej i pojawił się błąd, bo

2:25nie zwróciliśmy promise. No właśnie zwróciłem tutaj return, czyli

2:29zwykłe undefind, więc do tego nigdy nie doszliśmy i dlatego then nam nie zadziałało,

2:34ale z pamięci podręcznej coś możemy zwrócić i teraz chcę ci pokazać co. Otóż

2:38mamy na klasie promise, czyli nie muszę tworzyć nowego obiektu poprzez new promise,

2:43ale od razu promise, coś takiego jak metodę resolve i reject i to nam

2:49zwraca promise, która od razu jest w stanie resolve. Mówiłem ci

2:53poprzedniej lekcji, że taka nowa promise utworzona zanim wykona się resolve, czyli że

2:57reject ma status pending. Natomiast tutaj od razu tworzymy promise,

3:01która od razu jest resolved i mogę jej przekazać dane tak jak przy resolve, czyli chcę

3:06przekazać to co mamy w tym CACHE i chcę to zwrócić.

3:10Mam nadzieję, że ma to dla ciebie sens, czyli jeżeli już raz takie zapytanie było wysłane

3:14to nie chce wysyłać go raz jeszcze, tylko tym return zakończyć całą funkcję,

3:19ale żeby nasz kod działał poprawnie, to on tutaj oczekuje, że then i catch będzie

3:23działać, czyli oczekuje promise. Dlatego można zrobić promise resolve i przekazać

3:28dane, które mają być pod resolve i to zostanie zwrócone, a więc tylko then

3:32nam się wtedy wykona, ale wszystko powinno działać tak samo, więc zróbmy sobie tutaj Pobierz

3:36dane. Udało się i teraz spróbujemy raz jeszcze. Przy okazji gdybyś

3:41międzyczasie wyświetlił obiekt cache, to widzimy, że pod kluczem do tego adresu URL

3:45te dane są. Spróbujmy raz jeszcze dać Pobierz dane i nie mamy

3:49żadnego błędu, one zostały tutaj znowu wstawione i mamy zwracam dane w pamięci podręcznej. W

3:54ten zatem sposób możesz korzystać z metod statycznych, na

3:58przykład żeby zrobić sobie pamięć podręczną, natomiast co jest ciekawe, one są

4:02potrzebne głównie po to, że jeżeli mamy jakiś kod, który oczekuje promise,

4:07że tam będzie then i catch, to możemy dowolnie ten kod sobie

4:11napisać, ale wystarczy że w którymś jego momencie będziemy robić promise

4:15resolve, zwracać ją w takim, w takiej formie, bez tworzenia nowego obiektu,

4:19czyli tak naprawdę synchronicznie, a nie asynchronicznie i to co jej przekażemy

4:24będzie później obsłużone w then albo w catch. Co ciekawe również mam

4:28metodę reject liczbę, która w moim przypadku się nie przyda, ale załóżmy, że chcielibyśmy

4:33powiedzieć, że drugi raz nie możemy pobierać takich danych, więc jeżeli one się tutaj

4:37znajdują, to moglibyśmy zwrócić promise reject, czyli od

4:41razu ją odrzucić i tutaj zrobić new error i napisać

4:45nie można pobierać tych samych danych

4:49po raz kolejny i to z kolei sprawi, że promise

4:53zostanie zwrócona od razu w stanie rejected i catch się na tym wykona. Zobaczmy. Teraz

5:00pobieramy dane, jest wszystko w porządku, ale próbuję to zrobić drugi raz i mamy

5:05komunikat, że nie można pobierać tych samych danych po raz kolejny, czyli ta

5:09funkcja się nam wykonała. Ja jednak na końcu zostawię to w takiej

5:13formie, bo jest to przynajmniej coś to jest praktyczne. Możemy w ten sposób zasymulować

5:17sobie pamięć podręczną.