Angular - komunikacja z serwerem za pomocą HttpClient
Stronę tą wyświetlono już: 2943 razy
Uruchamianie lokalnego serwera
Dalsza praca będzie wymagała wykorzystania wiedzy związanej z tworzeniem prostego lokalnego serwera opisanej na stronie Programowanie → Angular - podstawy → Angular - tworzenie lokalnego serwera na potrzeby serwisów. W tym przypadku dane, z których będę korzystał będą miały następującą postać:
zapisane w pliku json_data.json. Uruchomienie serwera wymaga wpisania w konsoli:
json-server json_data.json
Pobieranie danych z serwera
Czas najwyższy użyć obiektu klasy HttpClient, dzięki któremu możliwe będzie łatwe pobieranie danych z serwera. W tym celu w module głównym app.module.ts należy zaimportować moduł HttpClientModule a następnie stworzyć nowy serwis:
ng g s FirstContact
Co spowoduje utworzenie nowego serwisu. Oto jak będzie wstępnie wyglądała klasa tego serwisu z możliwością pobierania danych z serwera:
Teraz już wystarczy wykorzystać tak stworzony serwis do pobrania danych z serwera:
oczywiście konieczne będzie też wstrzyknięcie serwisu w konstruktorze:
Wynik działania kodu powinien być następujący:
books (2) [] 0: Object { id: "1", title: "Rio Anaconda", author: "Wojciech Cejrowski" } 1: Object { id: "2", title: "Pan Tadeusz", author: "Adam Mickiewicz" } length: 2 <prototype>: Array[]
Możliwe jest oczywiście pobieranie pojedynczego elementu z listy książek, wystarczy utworzyć takie oto zapytanie:
Jak widać użyłem tutaj niezbyt przyjaznego typu any, warto go zastąpić interfejsem opisującym zawartość zwracanych danych:
Dodawanie nowego rekordu do bazy danych
Dodanie nowej książki, czyli nowego elementu do bazy danych na serwerze według specyfikacji powinno polegać na wysłaniu obiektu książki bez id na POST-a, czyli tym razem metoda w serwisie będzie wyglądała tak:
Teraz jest okazja, aby wykorzystać operatory RxJs:
Wynik działania w konsoli powinien wyglądać następująco:
Zakończono i zwrócono: Object { id: "FTQDCYl", title: "Gringo wśród Dzikich plemion", author: "Wojciech Cejrowski" } books (3) [] 0: Object { id: "1", title: "Rio Anaconda", author: "Wojciech Cejrowski" } 1: Object { id: "2", title: "Pan Tadeusz", author: "Adam Mickiewicz" } 2: Object { id: "vtI1lvc", title: "Gringo wśród Dzikich plemion", author: "Wojciech Cejrowski" } length: 3: []
Najpierw przyszedł nagłówek potwierdzający, że dane zostały wysłane prawidłowo i zapisane na serwerze, następnie poszło zapytanie o książki, które zwróciło nową listę książek. Gdyby pierwsze żądanie się nie powiodło, to drugie również by się nie powiedzie drugie nie zostanie wysłane.
Zapisywanie zmian w bazie
Kolejne zapytanie to PUT, oznacza ono, że dane są wysyłane w celu zapisania zmian w rekordzie w bazie danych. Oto jak wygląda metoda w serwisie:
Jak widać książka zostanie zapisana a jej id koniecznie trzeba podać w ścieżce. W przypadku POST-a nie było to konieczne z tego prostego względu, że to baza danych nadaje id wpisowi, gdy ten jest do bazy danych dodawany.
Usuwanie elementu z bazy danych
Do serwera można wysłać zapytanie DELETE, którego celem jest usunięcie wpisu z bazy danych. Metoda w serwisie będzie wyglądała następująco:
Wysyłanie dodatkowych parametrów w ścieżce zapytania
HttpClient umożliwia wysyłanie dodatkowych informacji w nagłówku. Ich wadą jest to, że są one jawne i mają ograniczone możliwości (nie można w ten sposób przesyłać całych obiektów). Czasami jednak mogą się przydać np. do pobierania tylko ograniczonej liczby rekordów, określenia warunków sortowanie itd. itp. Oto jak w prosty sposób można utworzyć taką metodą w serwisie:
Jak widać, gdy parametr limit będzie różny od 0 to dodane do adresu zostanie query z limitem elementów do pobrania. Metoda set zwraca instancję zmodyfikowanego obiektu HttpParams. Przykładowo ścieżka dostępu może wyglądać tak: localhost:3000/book?limit=50.
Gdyby parametrów było więcej ścieżka mogłaby wyglądać tak: localhost:3000/book?limit=50&offset=150.
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman
Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta
Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri
Tytuł:
Angular w akcji
Autor:
Jeremy Wilken
Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman
Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz