JavaScript: Pobieranie danych

0:00Kiedy wiesz już czym jest JSON, bo powidzieliśmy w lekcji poprzedniej, że jest

0:04to po prostu taki tekstowy format wymiany danych, który można sparsować np.

0:09na obiekty JavaScript, to w tej lekcji powiemy sobie czym jest Ajax i jak wygląda.

0:14A więc Ajax to jest nic innego jak takie potoczne określenie na sposób wysyłania

0:19zapytań przez przeglądarkę JavaScript z poziomu kodu JavaScript.

0:24Czyli innymi słowy jeżeli tą stronę odświeżę to przeglądarka wysłała do tego

0:27serwera lokalnego zapytanie po taką stronę i ją pobrała.

0:31Natomiast w momencie życia tej strony, czyli można powiedzieć, że ona teraz jest

0:35czytana i sobie żyje, nic się na niej nie dzieje,

0:37wiesz, że możemy wykonywać kod JavaScript na przykład klikając na jakiś przycisk,

0:42możemy wykonać naszą funkcję. I Ajax pozwala nam wysłać zapytanie do serwera po

0:46jakieś dodatkowe dane, otrzymać te dane w formie np.

0:50tekstu i ten tekst wstawić na stronę bez przeładowywania strony.

0:54No i jak możemy zrealizować AJAX w nowoczesnych przeglądarkach?

0:58Najpierw powiem Ci jak mniej więcej robiło się to do tej pory.

1:00Otóż nadal można tak robić i sporo różnych

1:03bibliotek z tego korzysta, że tworzyliśmy taki specjalny obiekt.

1:07Nazwalibyśmy zmienną xhr i pisaliśmy new XMLHttpRequest. To był taki specjalny

1:13obiekt tutaj zwrócony, na którym się ustawiało różne rzeczy

1:15wpisując np.

1:16open podawaliśmy, że chcemy wysłać zapytanie metodą GET,

1:21podawaliśmy tutaj adres, potem mogliśmy dodać jeszcze jakieś dane

1:24na przykład w przypadku GET wysyłaliśmy

1:26tylko coś pod adres, ale w przypadku metody np.

1:28post mogliśmy jakieś dane pobrać itd.

1:31Przypisywaliśmy do tego obiektu

1:33odpowiednie zdarzenia, że jak się to już pobierze, to coś wykonaj itd.

1:37Nadal można to robić, ale ja nie chcę Ci

1:38tego przedstawiać, bo mamy lepszą, nowszą funkcję, która jest dużo prostsza w

1:42użyciu, a pozwala zrealizować dokładnie to samo.

1:45I ta funkcja w przeglądarkach internetowych nazywa się fetch.

1:48Co ważne, ta funkcja nie jest częścią

1:50samego języka JavaScript, ale tylko tej platformy webowej.

1:54Czyli można powiedzieć, że środowiska przeglądarek internetowych.

1:57I teraz co my będziemy chcieli zrobić?

1:59Otóż będziemy sobie chcieli pobrać dane JSON z takiej strony,

2:04zobacz, mamy taką stronę jsonplaceholder.typicode/posts

2:07Tutaj można sobie takie dane

2:09pobierać i po prostu z nimi pracować, więc to wykorzystamy.

2:12I tak jak Ci pokazałem w lekcji poprzedniej, JSON to jest nic innego jak po

2:16prostu ciąg znaków. Czyli to jest zwykły tekst, który my otrzymamy z tego serwera,

2:20natomiast widzimy od razu, że w przypadku

2:21JavaScriptu jak to sparsujemy to będziemy mieli tablicę, a w tej tablicy

2:25wiele obiektów, które reprezentują posty, czyli jakieś wpisy.

2:29Jak sobie to zamienimy na obiekty JavaScript to będziemy mieli tablicę z

2:32obiektami i będziemy mogli do każdego z nich się odwołać np.

2:35wstawiając go na stronę.

2:37Więc to jest ważne, że chcemy wysłać sobie zapytanie pod taki adres.

2:41Zatem kopiuję ten adres i po kliknięciu na ten przycisk coś będziemy chcieli zrobić.

2:45A więc przypiszmy mu zdarzenie poprzez addEventListener click,

2:48to jest funkcja, którą chcę wywołać, kiedy ktoś kliknie.

2:51I w tej funkcji zrealizujemy sobie właśnie pobieranie tych danych.

2:55A więc funkcja nazywa się fetch

2:57i jak wspomniałem, jest globalnie dostępna

3:00i ta funkcja przyjmuje tutaj adres pod jaki chcemy wysłać zapytanie HTTP.

3:04Wstawimy sobie tutaj ten adres i następnie ta funkcja zwraca tzw.

3:08promise.

3:09A na tych promisach pracuje się tak, że można na nich skorzystać z metody then,

3:13czyli powiedzieć kiedy to się pobierze, wykonaj moją funkcję.

3:17I tutaj możemy przekazać funkcję,

3:19która otrzyma automatycznie taki parametr jak res, czyli response.

3:23Oczywiście możesz go nazwać jak chcesz, bo to Ty tworzysz tą funkcję.

3:26Mam nadzieję, że na tym etapie jest to już jasne, no i moglibyśmy sobie zrobić console.log

3:30tego response, żeby zobaczyć co tam się znajduje.

3:32Ja to złamię również na nową linię,

3:34dlatego, że taki zapis w języku JavaScript jest jak najbardziej poprawny.

3:38Będzie działał tak samo. Więc po

3:39kliknięciu na przycisk wyśle się jakieś zapytanie i żeby to zobaczyć przejdziemy

3:43sobie tutaj do panelu Network i to zapytanie po prostu zobaczymy.

3:47Mamy tutaj zaznaczone All, możemy też zaznaczyć samo XHR,

3:50wtedy będziemy widzieć tylko te zapytania AJAX-owe.

3:53Niemniej jednak jak to zaznaczysz

3:55a będziesz szukał potem jakichś innych zapytań

3:57pamiętaj, żeby wrócić do All.

3:59Teraz klikam Pobierz dane i zobacz.

4:02Widzimy to zapytanie.

4:03Ono rzeczywiście się wysłało.

4:04Jeżeli sobie klikniemy to zobaczymy wszystkie jego szczegóły. Pod jaki adres

4:08było wysłane, jaki status Code otrzymaliśmy itd.

4:11Jakie my wysłaliśmy nagłówki.

4:13To jest temat związany stricte z

4:14protokołem HTTP, który może nie być dla Ciebie jeszcze zbyt dobrze znany.

4:19Niemniej jednak wiedz, że wysyłamy

4:21zapytania dodając jakieś Response Headers, czyli takie dodatkowe dane do tego zapytania,

4:25przeglądarka je wysyła, serwer na ich podstawie może różne decyzje podejmować,

4:30niemniej jednak najważniejsze jest tutaj, że otrzymaliśmy spowrotem coś takiego.

4:35Przynajmniej tak to wygląda tutaj.

4:36Ale jak sobie zerkniemy do konsoli co się

4:38znalazło pod tym obiektem response to wygląda to tak.

4:42No i teraz jak odczytać te dane, które rzeczywiście z takiego adresu są zwracane?

4:47Mamy ten obiekt response i teraz z niego

4:50musimy sobie to jakoś wyciągnąć. I robi się to w ten sposób, że w tej funkcji fetch

4:54ten obiekt response tutaj podstawiany ma kilka metod np.

4:58metodę text.

4:59I jeżeli zrobimy return text

5:01to text zwraca taką specjalną promise, więc nie możemy sobie od razu tutaj np.

5:06przypisać do zmiennej powiedzmy text i sobie to jakoś odczytać

5:11tylko musimy to zwrócić z tej funkcji i to sprawi, że możemy dodać tutaj kolejny blok

5:16then i tutaj podać kolejną funkcję, która już otrzyma ten konkretny text.

5:21Działa to w taki sposób asynchroniczny, że po prostu jeżeli jest to tutaj zwracane

5:26jakiś czas będzie to powiedzmy przetwarzane na text.

5:29Oczywiście to będzie bardzo szybko, ale

5:31działa to w sposób asynchroniczny i z tego powodu musimy podać kolejny blok then,

5:35a nie wystarczy żebyśmy sobie to zapisali do stałej.

5:38Tutaj już do tej funkcji pod text zostanie to właśnie podstawione w odpowiedni sposób

5:42i możemy zrobić console.log tego właśnie tekstu.

5:45Więc zobaczmy.

5:46Pobierz dane i w konsoli wyświetlił się cały ten tekst pobrany z serwera.

5:50Ten tekst jest to JSON, ale jeżeli chcielibyśmy go zamienić na obiekty

5:55JavaScript na taką tablicę, to musimy na tym tekście wykonać sobie to,

5:59co Ci pokazałem w lekcji poprzedniej, czyli JSON.parse. A więc sparsować cały

6:03ten tekst i to nam już zwróci prawdziwą tablicę z obiektami.

6:07Zobaczmy.

6:08Jak widzisz, tak to jest tutaj wyświetlane.

6:10Mamy prawdziwą tablicę pod indeksem pierwszym, czyli zero.

6:14Na samym początku mamy jakiś obiekt 1 i tak dalej.

6:18Niemniej jednak jeżeli z serwera pobieramy

6:20JSON, bo możemy pobierać też inne rzeczy,

6:22to jeżeli pobieramy JSON to nie musimy

6:25tutaj zwracać tekst, tylko jest na tym obiekcie response.

6:28Specjalna metoda, która nazywa się JSON i wtedy pod to tutaj text zostanie już

6:33podstawione dokładnie to samo, co moglibyśmy zrobić z użyciem JSON.parse.

6:37Więc jeżeli to tak podstawie, to już nie musimy tego automatycznie parsować.

6:41Zostało to za nas sparsowane i wtedy nazwa tego parametru text nie do końca ma sens.

6:46Pobieramy posty, więc nazwijmy to po prostu posts.

6:50OK, zobaczmy jeszcze raz.

6:51Działa to dokładnie tak samo.

6:53Kiedy natomiast korzystałbyś z tej metody text?

6:56Zawsze wtedy, kiedy pobierasz jakiś tekst z serwera.

6:58Może to być jakiś kod HTML, który z

7:00użyciem inner html wstrzykniesz na stronę, albo np.

7:03zobacz, gdybyśmy skopiowali sobie cały ten adres,

7:06swoją drogą możemy kliknąć prawym przyciskiem, podejrzeć źródło strony,

7:10ten adres zwraca taki tekst html. Więc

7:13pytanie czy Ajaxem można by było taki tekst pobrać?

7:16Jak najbardziej. Gdybyśmy tutaj podstawili coś takiego.

7:19Tylko wtedy byśmy tego nie parsowali na JSON, bo to po prostu nie zadziała, a

7:23zwrócilibyśmy stąd text, to zostanie podstawione pod posts,

7:26może to nazwiemy jeszcze na chwilę text.

7:30To co by się pobrało. Zobaczmy.

7:32Klikam Pobierz dane i w konsoli widzimy cały kod HTML tej strony.

7:36A to nam pokazuje, że z użyciem AJAX

7:38możemy wysyłać dowolne zapytania HTTP i następnie to co serwer normalnie by

7:43zwrócił to zwróci nam po prostu w formie takiego tekstu. Czyli jak przeglądarka przy

7:48odświeżeniu tej strony wysyła zapytanie to otrzymuje taki kod HTML,

7:52więc jak my wyślemy takie zapytanie Ajaxem też otrzymamy taki kod HTML,

7:57natomiast są pewne restrykcje, że nie do

7:59wszystkich stron możesz sobie wysyłać takie zapytania.

8:01Te serwery do których chcesz wysyłać

8:03zapytania muszą pozwalać na takie zapytania AJAX.

8:06Ale o tym teraz nie będziemy mówić.

8:08Wrócimy sobie do takiego formatu.

8:10I w zasadzie jeżeli chodzi o ten fetch to tak to wygląda.

8:13Ale możemy jeszcze obsłużyć jeden wyjątek,

8:16to znaczy kiedy będzie błąd.

8:18Bo jeżeli ten adres jest poprawny, to

8:20otrzymamy poprawne dane, ale jeżeli on byłby niepoprawny np.

8:24podałbym tutaj coś takiego, zobacz, spróbujemy wysłać zapytanie i

8:28otrzymamy błąd. Jeżeli chcielibyśmy go w kodzie obsłużyć, żeby na przykład

8:32wyświetlić komuś komunikat na stronie, że wystąpił błąd, to w takich promise możemy

8:36podać blok catch i tutaj przekazać funkcję, która się wywoła kiedy wystąpi błąd.

8:41I możemy tutaj napisać np.

8:43Wystąpił błąd.

8:47OK, zobaczmy. Pobieramy

8:49i jak widzisz tutaj mamy

8:50teraz Wystąpił błąd, więc ładnie to obsłużyliśmy,

8:52natomiast jeżeli tego błędu nie

8:54będzie, to ten blok catch z tą funkcją w ogóle się nie wykona.

8:59Mam zatem nadzieję, że na szybko zrozumiałeś jak działa JSON.

9:02Funkcją fetch możemy sobie pobrać z serwera

9:04dowolne dane i następnie, jeżeli to są dane JSON, możemy je zwrócić w ten

9:09sposób, a w kolejnej funkcji zrobić już z tym sparsowanym JSON co chcemy.

9:13Jeżeli natomiast będziesz pobierał inne dane np.

9:16czysto tekstowe, nie będziesz tego parsował na JSON.

9:18Tutaj zwrócisz to metodą text i w kolejnym

9:21bloku then również będziesz mógł z tym zrobić dowolną rzecz, traktując to jako string

9:25JavaScript.