06. Pozivanje API a - kristijan-perkovic96/Osnove-reacta GitHub Wiki

Sve aplikacije trebaju podatke, isto tako i web aplikacije, ali odakle nam podaci? Naravno odgovor je s API-a. Kako bismo pozvali API možemo koristit Axios ili fetch. U ovome primjeru koristit će se REST API koji je kreiran u Spring frameworku te se koristi lokalno na računalu. Ukoliko vas zanima kako se kreira REST API u Springu to će te moći pogledati u jednom od repozitorija, možda trenutno nije dostupno, ali kroz nekoliko mjeseci će se nalaziti jednako kao i materijali za React.

API se većinom poziva s neke forme prilikom pretraživanja ili recimo prilikom prijave, iz toga razloga kreirat ćemo jedan gumb te kada se pritisne na njega pozvat će se API te će se obraditi dobiveni podaci. U ovome primjeru koristit će se Axios te ga je potrebno instalirati prije nego što započnemo s radom. Instalacija Axiosa je jako jednostavna, u terminal unesite: npm i axios i pritisnite enter.

Za korištenje API-a potrebno je poznavati namjenu metode get,post,put i delete. Get se koristi ukoliko želimo dohvatiti neki podatak. Post ukoliko želimo nešto kreirati, put koristimo prilikom ažuriranja, dok delete koristimo ukoliko želimo nešto obrisati.

Axios ima te metode već ugrađene te ćemo koristi metodu get.

Napravili smo jednostavan poziv get metode te ispisali dobivene podatke u konzolu, pošto se radi o asinkronom pozivu moramo uhvatiti odgovor/response te kada on dođe tada ga trebamo obraditi, u ovome slučaju smo ga ispisali u konzolu kako bismo provjerili radi li sve ispravno. Sada kada imamo sve podatke možemo obraditi podatke, na primjer prikazati u tablici. Naravno nije neka velika promjena koda, dobivene podatke spremili smo u varijablu te smo zatim u prikazu iterirali kroz naše podatke i iscrtali tablicu pomoću html elemenata.

Naravno ovo je jedan od načina korištenja Axiosa, pod način korištenja smatram da se pozivaju metode get, post ,put ili delete. Sve se ovo može napraviti na način da koristimo zaglavlje. Zaglavlje našeg zahtjeva predstavlja nam jedan objekt čiji su atributi method,url,headers,data i responseType. Method je zapravo tip metode, što znači da navodimo get, post, put ili delete. Headers nam predstavlja header-e u našem zahtjevu kao što su Authorization unutar kojega možemo staviti naš access token. Data predstavlja sve podatke koje prosljeđujemo na API kako bi se izvršila željena akcija. Zadnji atribut našeg zaglavlja je responseType koji služi kao bismo definirali što očekujemo kao odgovor, ovo se najčešće koristi ukoliko želimo zaprimiti datoteku.

Možemo konfigurirati Axios te na taj način olakšati si posao oko pisanja velikih URL-ova. Ovo je samo jedna od mogućnosti koje nam daje Axios, ukoliko radimo s access tokenom i/ili refresh tokenom tada ih možemo spremiti u konfiguraciju te ne moramo razmišljati jesmo li postavili autorizaciju.

Prikaz rada aplikacije: