Nowoczesny React: Użycie klienta HTTP, zapytania AJAX

0:00Zwróć uwagę, że teraz, żeby poprawnie działał nasz projekt musimy

0:03mieć otwarte i backend i dev.

0:06Za chwilę połączymy się z backendem.

0:08Będziemy do tego używać biblioteki, która nazywa się Axios, czyli

0:13Promise Base HttpClient.

0:15Warto sobie jakiegoś klienta zainstalować do naszej aplikacji,

0:19dlatego, że upraszcza on diametralnie połączenia i wykonywanie takich

0:24standardowych requestów, które mamy na porządku dziennym do właśnie Backend

0:29API, takich jak post, takich jak Get.

0:31Zobacz, że bardzo, bardzo przyjemnie będzie nam się z tego korzystało.

0:34To jest promise based, więc będzie to bardzo, bardzo podobne do tego co mamy.

0:39Pamiętajmy jednak, że teraz zmienią się nasze dane dlatego, że

0:41obsługujemy name oraz ID.

0:44Spróbujmy się połączyć i spróbujmy teraz zmienić naszą koncepcję.

0:49Dlatego, że od tej chwili będziemy musieli po prostu wyłuskiwać sobie tutaj te

0:54imiona, Dlatego, że będziemy pracować na obiektach, a nie jak do tej pory

0:59na właśnie takiej tablicy stringów.

1:01Spróbujmy w takim wypadku dorzucić sobie tu coś takiego jak services i od

1:07razu przygotujmy to poprawnie.

1:08Czyli tutaj będziemy mieli coś, co jest JavaScriptem.

1:12Jako PeopleServiceJS ten mój PeopleService to będzie po prostu taki globalny

1:18singleton, który można sobie zaimportować w dowolnym miejscu i oczywiście będzie on

1:22operował tymi elementami, które mieliśmy tutaj.

1:25Czyli mamy tutaj get people, add person, możemy sobie porobić właśnie tego typu

1:30funkcje tutaj Get people, add person i tutaj zastosujemy acciosa, czyli tu

1:36będziemy łączyć się z tym localhost 3000 people za pomocą Acciosa zainstalujmy go

1:41sobie w projekcie, czyli npm install acsos i potrzebujemy go sobie stąd

1:47zaimportować, czyli import ACS from ACS.

1:51I tutaj nasz base URL dla instancji acciosa to niech będzie localhost 3000

1:57i możemy to sobie złamać na peoples.

1:59I ta nasza ACS instance, czyli nazwijmy to sobie ACS instance będzie

2:05miała po prostu get.

2:07Jeśli chodzi o People, możemy sobie to przenieść w ten sposób.

2:11Będzie to troszeczkę bardziej intuicyjne, że tutaj uderzamy na endpoint people.

2:16Dlatego baseURL to Access instance.

2:19Docelowo w aplikacji, którą chcielibyśmy rozwijać, mogłoby być w

2:23zupełnie innym miejscu.

2:24No i tutaj uderzać do naszego backendu.

2:27Zobaczmy sobie, czy to People service get people w ogóle działa.

2:30Czyli spróbujmy sobie to odebrać w naszym komponencie.

2:33Wróćmy sobie tutaj do Pages i mamy tutaj People page.

2:37Widzimy, że tutaj ładujemy sobie dane i w ten sam sposób będziemy chcieli się

2:41odnieść do właśnie People Serwis Get People.

2:46Spróbujmy sobie to przedstawić jako consolelog.

2:49I tutaj await get people.

2:51Zobaczmy czy to w ogóle działa.

2:52People Serwis oczywiście importujemy sobie z tego co przygotowaliśmy przed chwilą.

2:57Actions jest zainstalowany.

2:58Zobaczmy sobie pod F12 co tu jest w konsoli.

3:02Widzimy, że data przychodzi do nas, czyli musimy to sobie opakować

3:05jeszcze z data i data.

3:07To jest 5 tutaj naszych obiektów, które chcielibyśmy dostarczyć.

3:11Czyli mamy await get people i tutaj musielibyśmy sobie jeszcze

3:16opakować to jako data.

3:18Spróbujmy zrobić to sobie w ten sposób.

3:20I teraz przesuńmy to do swojego stanu.

3:23I tutaj get people mamy to Lowercase is not a function.

3:27To się wszystko zgadza, dlatego, że teraz people musimy wszędzie poprawić.

3:31Dlatego, że tam gdzie korzystamy z People nie będziemy mieli name, tylko

3:35będziemy mieli już obiekt.

3:36Ten obiekt w przypadku na przykład filter people będzie miał tutaj name.

3:41W ten sposób, czyli tutaj poprawiamy sobie people filter.

3:45Dalej powinniśmy sobie people poprawić tam gdzie mamy jedną osobę, czyli tutaj

3:51filter people to nie będzie już name.

3:53Gdybyśmy chcieli korzystać z name, to troszeczkę inaczej by to wyglądało.

3:56Natomiast zobacz, że tutaj możemy sobie rozpakować ID oraz name.

4:01I teraz klucz to niech będzie ID i tutaj będziemy sobie przekazywać

4:05name is selected.

4:07Czy chcemy sobie jako selected przekazywać ID?

4:10Niekoniecznie możemy sobie przekazywać name y tak żebyśmy od razu

4:13dostali informację zwrotną.

4:15Czyli to handle select niech dalej operuje nam name ami, czyli nie zmieniajmy na

4:19razie tej funkcjonalności i zobaczmy sobie, że wszystko działa poprawnie.

4:24Spróbujmy sobie coś zmienić na naszym backend tak, żeby zobaczyć, czy

4:29to faktycznie działa poprawnie.

4:31Dodajmy sobie chociażby jedną osobę z nowym numerkiem IT.

4:35Załóżmy coś takiego.

4:37I teraz, jeżeli sobie odświeżymy, to widzimy, że Roman jest tutaj z nami, więc

4:42generalnie wszystko działa poprawnie.

4:45W momencie, w którym dodajemy sobie te osoby i uderzamy do start party, wszystko

4:50jest w porządku, dlatego, że tutaj dostarczamy to właśnie za

4:53pomocą zauważ po prostu imion.

4:56I zobaczmy jeszcze czy wyszukiwanie działa.

4:59Mark jest ok.

5:00Roman ok.

5:02Widzimy, że wszystkie nasze funkcjonalności działają poprawnie.

5:05Więc bardzo, bardzo minimalnym kosztem dorzuciliśmy sobie backend.

5:09Co więcej, dorzucamy sobie Axiosa, który jest biblioteką, która gwarantuje Ci, że

5:15nam się zwróci, chociażby dla przykładu użycia tak zwanych interceptorów.

5:19Ta biblioteka to obsługuje.

5:21Tutaj możemy sobie dalej rozwijać te nasze kolejne, kolejne elementy,

5:25jak na przykład Add Person.

5:26Za chwilę sobie do tych rzeczy przejdziemy i tutaj jak gdyby będziemy sobie mogli

5:32właśnie w ten sposób rozwijać kolejne Serwisy i pytać o backend, o dane.

5:37Mamy tutaj 1 backend na porcie 3000.

5:40Docelowo chcielibyśmy podmienić to localhost 3000.

5:44Powiemy sobie o tym już w momencie, gdy będziemy starali się robić

5:49deployment aplikacji.

5:50Dlatego, że wtedy nie możemy iść do localhost 3000.

5:54W momencie, gdy będziemy robić produkcję dlatego, że użytkownik nasz końcowy nie

5:59ma wystawionego serwera na porcie 3000.

6:02My to mamy oczywiście dla potrzeb deweloperskich.

6:04U nas teraz od zawsze będziemy chcieli, żeby działało.

6:07Dev działało backend.

6:08Jeśli backend nie zadziała, zwróć uwagę, że mamy taką pustą listę, natomiast mamy

6:13informację zwrotną, że jest jakiś access error.

6:16Można sobie dorzucić obsługę tego erroru, czyli można sobie zaprojektować jak byśmy

6:22chcieli tutaj poinformować użytkownika o tym, że jest problem i nie udało

6:26nam się połączyć z serwerem.

6:28Natomiast na ten moment przeszliśmy do obsługi właśnie serwerowej.

6:33Jeśli cokolwiek dopiszemy w JSON i wystawimy serwer, jesteśmy w stanie to

6:37ściągnąć i kosztowało nas to zasadniczo zmiany w dwóch miejscach w naszym kodzie.