Angular2 – HTTP – wysyłanie danych – @angular/http

wysyłanie danych

Wysyłanie danych w Angular2 jest możliwe dzięki metodzie post() z pakietu http. W tym wpisie wykorzystamy reaktywny formularz stworzony wcześniej i wyślemy dane na backend naszej aplikacji.

Wysyłanie danych – http.post()

Do wysłania danych użyjemy metody post() z poznanego już pakietu http.

post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>

Post składa się z trzech parametrów: url, body oraz options. Jako pierwszy parametr podajemy adres URL endpointa w postaci ciągu znaków np. 'http://localhost:8001/product'. Następnie body, czyli dane, które chcemy wysłać. Ostatni parametr to opcje. Jak widać po deklaracji tylko url i body są wymagane.

Nawiązując do przykładu prosty http.post() w naszej aplikacji wygląda następująco:

Opcje – Options

Aby dodać options należy zaimportować Headers i RequestOptions. Obie klasy znajdują się również w paczce http.post().

Tworzymy lokalną zmienną headers, która zawiera zdefiniowane przez nas nagłówki. Następnie tworzymy opcje, w których umieszczamy headers. Tak przygotowaną zmienną, przekazujemy jako trzeci parametr w metodzie post.

Wysyłanie danych

Aby nasza metoda zadziałała, należy ją wykorzystać w metodzie onSubmit w formularzu.

Wykorzystujemy tutaj stworzoną wcześniej metodę create() z naszego repozytorium. Narazie wyświetlamy console.info jeżeli request zakończy się powodzeniem lub console.error w przypadku błędu.

wysyłanie danych - http - 201 - Created

wysyłanie danych - http - 404 - error

Angular2 – HTTP – pobieranie danych – @angular/http

Angular2

W poprzednim wpisie utworzyliśmy aplikację w Angular2 z pomocą Angular CLI. W tym wpisie stworzymy prosty serwis do pobierania danych z API oraz wyświetlimy wynik naszej pracy w przeglądarce. Do komunikacji wykorzystamy paczkę Angular2 – HTTP (@angular/http).

HTTP Module

Http Module nie należy do rdzenia Angular2. Jest dodatkowym modułem wykorzystywanym do komunikacji w sieci. Aby go wykorzystać należy zaimportować paczkę @angular/http.

Generowanie serwisu

Na początku pracy wygenerujemy serwis, w którym będzie logika odpowiedzialna za komunikację z backendem: ng g s product.

Importujemy serwis w odpowiednim module oraz dodajemy go do providers.

Pobieranie danych

Do pobierania listy produktów wykorzystamy metodę list(). Tworzymy zatem publiczną metodę o tej nazwie, która zwracać będzie nam Observable: public list(): Observable<Product[]>

Następnie wykorzystujemy @angular/http i metodę get() w parametrze, której podajemy URL do naszego endpointa:

this.http.get(this.listUrl)

Dzięki metodzie map() z biblioteki rxjs uzyskamy Observable. Tamteż możemy sparsować dane, które otrzymujemy do formatu JSON:

Warto też obsłużyć wyjątek i poinformować użytkownika o ewentualnym niepowodzeniu:

Wykorzystanie serwisu

Zwieńczeniem naszej pracy będzie wykorzystanie serwisu w komponencie product-list.

Tworzymy metodę getProducts(), w której wykorzystamy stworzoną wcześniej metodę list() z product.service. Robimy na niej subscribe() i przypisujemy wynik do zmiennej products.

Wyświetlenie danych

Na koniec możemy wypisać nasze dane np za pomocą dyrektywy ngFor:

W Chromie nasze produkty przedstawiają się następująco:

Angular2 - HTTP - get products