Tworząc aplikację prawie zawsze potrzebujemy pobrać coś z bazy, uaktualnić, dodać czy usunąć. W przypadku Angulara tworzy się serwisy, które są zbiorem funkcji pozwalających właśnie na komunikację z API.

Jest kilka możliwości na stworzenie pliku zawierające zapytania pozwalające na wykonanie różnych akcji związanych z przesyłem danych. Przygotowałam przykładowy plik orders.service.ts wykorzystujący rxjs/Obsrvable korzystający z RESTowego API.

REST API

Zacznijmy może jednak od tego, czym jest REST. To nic innego jak sposób tworzenia API. Jeśli ktoś mówi, że korzysta z RESTowego API, to od razu wiemy jak wygląda schemat działania zapytań.

Po pierwsze spotkamy się z poleceniami: get, post, put i delete. Po drugie polecenia będą wykonywały określone akcje pod danymi adresami. Wiedząc, że lista danych znajduję się pod adresem http://localhost:3000/orders możemy określić co i jak będzie działać. I tak od słów do konkretów:

  • get wysłane pod adres http://localhost:3000/orders będzie pobierać listę danych (tu zamówień)
  • get wysłane pod adres http://localhost:3000/orders/id (tu musimy się tylko dowiedzieć, jak wygląda kwestia id 🙂 ) będzie pobierać dane dotyczące konkretnej pozycji z listy (tu konkretnego zamówienia)
  • post wysłane pod adres http://localhost:3000/orders utworzy nową pozycję na liście (nowe zamówienie)
  • put wysłane pod adres http://localhost:3000/orders/id spowoduje edycję pozycji z danym id (edycja konkretnego zamówienia)
  • delete wysłane pod adres http://localhost:3000/orders/id  usunie pozycję z listy (usunięcie zamówienia)

ANGULAROWY SERWIS

No to już wiemy jak wygląda kwestia naszego API i jakie zapytania będziemy obsługiwać. W poniższym kodzie zachowałam kolejność opisywanych powyżej operacji, co mam nadzieję, ułatwi zrozumienie.

Słów kilka o powyższym kodzie, bo nie wykorzystamy jak nie będziemy wiedzieli, jak działa. Na samym początku importuję wszystko, co będzie potrzebne podczas tworzenia zapytań. Dodatkowo w konstruktorze tworzę zmienną _http.

Czas na drugą zmienną: _baseUrl.  Przechowuje ona adres API.

Dwie pierwsze funkcje to nic innego jak pobranie listy zamówień i danych dotyczących konkretnego zamówienia. Wszystko zgodnie z opisanym powyżej działaniem funkcji get.

Przeskoczymy teraz do removeOder. Tutaj wykorzystujemy API w celu usunięcia danej pozycji poleceniem delete wykonanym pod adresem konkretnego zamówienia.

Nieco więcej jest do powiedzenia na temat createOrder i editOrder. Widzimy tu nie tylko polecenie post i put przyjmujące jako parametr adres API. Dodatkowo pojawiają się dwa parametry: body i options.

Dlaczego? Odpowiedź jest prosta. Chcemy przekazać jakiś obiekt do naszego API. Nasze API oczekuje jsona. Skoro tak, to przekazywany obiekt (item) musimy skonwertować na postać jsona (zmienna body) oraz dodać nagłówek do naszego zapytania (zmienna options).

WYKORZYSTANIE SERWISU W KOMPONENCIE

Teraz pozostaje korzystać z naszego serwisu. Importujemy plik orders.service.ts do komponentu. Następnie w konstruktorze tworzymy zmienną, pod którą będzie dostępny.

I teraz najprzyjemniejsza cześć 🙂 Korzystamy z metod utworzonych w serwisie. Na przykład mamy przycisk odpowiadający za dodanie zamówienia. Importujemy w komponencie

i przy kliku wywołujemy funkcję

W wyniku zakończenia funkcji sukcesem dostaniemy informację zwrotną z bazy, która zostanie zapisana pod zmienną result, a  w przeciwnym razie w konsoli zostanie wyświetlony komunikat błędu. Jeśli wszystko jest ok z utworzonym serwisem i w createOrder przekażemy obiekt, który sparsowany na jsona odpowiada temu, czego spodziewa się backend, to do bazy zostanie dodana nowa pozycja 🙂

Author: