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

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

 

Dawid Ryłko

Lubię dobre filmy, gry oraz kawę. W pracy front-end, po godzinach wszystko inne.

 
Współpraca:
Polski Front-End