Kako konzumirati API-je u Reactu koristeći Fetch i Axios

API (Application Programming Interface) je skup protokola koji aplikaciji omogućuje slanje zahtjeva poslužitelju i primanje odgovora.

Putem API-ja možete integrirati dijelove softvera u svoju aplikaciju bez sitnog posla. Ovaj proces korištenja API-ja u vašoj aplikaciji općenito se naziva korištenjem API-ja. Na primjer, ako želite prikazati određenu lokaciju na svojoj web stranici, upotrijebili biste API za Google karte umjesto implementacije funkcionalnosti karte od nule. API-ji stoga smanjuju vaše radno opterećenje i štede vam vrijeme.

Da biste naučili kako koristiti REST API-je u Reactu koristeći Fetch i Axios, izgradit ćete jednostavnu React aplikaciju koja dobiva nasumične činjenice o mačkama iz API-ja kada kliknete gumb.

Vrste API-ja

API-ji se mogu klasificirati prema dostupnosti ili slučaju korištenja. Što se tiče dostupnosti, API-ji mogu biti javni, privatni, partnerski ili složeni API-ji. Kada se razvrstavaju prema namjeni, mogu biti baze podataka, udaljeni, operativni sustavi ili web API-ji. U ovom članku koristit ćemo vrstu web API-ja pod nazivom REST (reprezentativno stanje) API.

REST API-ji omogućuju vam da dobijete podatke iz izvora putem URL-a. U Reactu postoji nekoliko metoda koje možete koristiti za korištenje REST API-ja. Ovaj članak govori o dvije najpopularnije metode, a to su API za dohvaćanje JavaScripta i HTTP klijent Axios koji se temelji na obećanjima.

Povezano: Što je REST API i kako možete dohvatiti podatke za svoju aplikaciju ili web-mjesto

Preduvjeti

Da biste slijedili ovaj vodič, trebali biste imati:

• Osnovno razumijevanje JavaScripta.
• Osnovno poznavanje Reacta i React kuka.
• NPM instaliran lokalno na vašem računalu.
• Instaliran je uređivač teksta ili IDE po vašem izboru.

Napravite React aplikaciju

Prvo ćete morati stvoriti React aplikaciju. Kopirajte sljedeću naredbu u svoj terminal da biste postavili React razvojno okruženje.

npx create-react-app catfact

Nakon što naredba završi izvršavanje, otvorite catfact mapu u uređivaču teksta. Svoj kod ćete pisati u datoteku App.js u src mapu pa samo naprijed i uklonite nepotreban kod.

uvoz "./App.css";
funkcija App() {
 vratiti (


Pritisnite gumb za slučajnu činjenicu o mačkama!



Saznajte Mačku činjenicu



 );
}
izvoz zadane aplikacije;

Zatim stvorite jednostavno korisničko sučelje koje će se koristiti za prikaz nasumične činjenice o mačkama.

U app.js

uvoz './App.css';
funkcija App() {
 vratiti (


Pritisnite gumb za slučajnu činjenicu o mačkama!



Saznajte Mačku činjenicu



 );
}
izvoz zadane aplikacije;

Da biste stilizirali svoju aplikaciju, dodajte sljedeći kod u app.css datoteka.

@import url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.App {
 font-family: 'Playfair Display', serif;
 margina: 20px 15vw;
}
h2 {
 font-family: 'Playfair Display', serif;
 font-weight: 700;
 veličina fonta: 3em;
}
dugme {
 padding: 1em 1.2em;
 granica: nema;
 veličina fonta: 1em;
 boja pozadine: #131212;
 boja: #ffffff;
 radijus granice: 0,5em;
 kursor: pokazivač;
}
gumb: lebdjeti{
 boja pozadine:#3b3b3b;
}

Vaša bi aplikacija sada trebala izgledati ovako.

U sljedećim koracima dohvatit ćete podatke iz API-ja i prikazati ih u aplikaciji.

Povezano: Kako stvoriti svoju prvu React aplikaciju s JavaScriptom

Konzumiranje REST API-ja pomoću Dohvaćanja

Dohvati API je sučelje koje vam omogućuje da dobijete resurse iz API-ja putem HTTP zahtjeva. The dohvati() metoda prima URL puta do resursa kao obavezni argument i vraća obećanje koje se može riješiti na odgovor.

Osnovna sintaksa dohvati() metoda je sljedeća:

dohvati('url na resurs')
 .then (odgovor => // obradi odgovor)
 .catch (err => // obradi pogrešku)

Implementacija Fetch API-ja

U Reactu se API za dohvaćanje koristi na isti način na koji se koristi u običnom JavaScriptu.

dohvati (" https://catfact.ninja/fact")
 .onda (odgovor => odgovor.json())
 .then (podaci => // obrađuju podatke)
 .catch (err => // obradi pogrešku)

U prvom retku u kodu iznad, prosljeđujete API URL na dohvati() metoda. dohvati() vraća HTTP odgovor koji se pretvara u JSON pomoću json() metoda. U trećem retku dobivate pristup podacima koje zatim možete koristiti u aplikaciji. Konačno, blok catch vam omogućuje elegantno rukovanje pogreškama.

Za implementaciju zahtjeva za dohvaćanje u komponenti aplikacije, koristit ćete React kuke. Korištenjem useEffect hook, vaša će aplikacija podnijeti zahtjev nakon što se komponenta učita i useState hook će stvoriti i ažurirati stanje komponente. Praćenje stanja osigurava da se komponenta ponovno generira kada API za dohvaćanje vrati odgovor.

Povezano: Hooks: Heroj Reacta

uvoz useState i useEffect.
import { useEffect, useState } iz 'react'

Stvorite stanje za držanje činjenice mačke i funkciju za njeno ažuriranje.

const [činjenica, setFact] = useState('')

Zatim stvorite funkciju za postavljanje GET zahtjeva za API i pozovite ga u useEffect kuka.

const fetchFact = () => {
dohvati (" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((podaci) => setFact (data.fact));
}
useEffect(() => {
 dohvatiFact()
}, []);

Vaša app.js datoteka sada bi trebala izgledati ovako:

uvoz "./App.css";
import { useEffect, useState } iz "react";
funkcija App() {
 const [činjenica, setFact] = useState("");
 const fetchFact = () => {
 dohvati (" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((podaci) => setFact (data.fact));
}
useEffect(() => {
 dohvatiFact()
}, []);
vratiti (


Pritisnite gumb za slučajnu činjenicu o mačkama!



Saznajte Mačku činjenicu
{činjenica}




);
}
izvoz zadane aplikacije;

Sada biste trebali moći vidjeti nasumične činjenice o mačkama prikazane u vašem pregledniku.

Zatim napišite kod za prikaz nasumične činjenice kada se klikne na gumb.

Izmijenite gumb tako da uključuje na klik događaj i njegovu funkciju rukovatelja.

 handleClick()}>Dohvati činjenicu o mačkama

Definirajte handleClick() funkcija kao što je prikazano u nastavku.

const handleClick = () => {
 dohvatiFact()
}

Sada, kada kliknete na gumb, handleClick() funkcija će pozvati dohvati podatke() koji će izvršiti API zahtjev i ažurirati stanje novom slučajnom činjenicom. Posljedično, korisničko sučelje aplikacije će se ažurirati kako bi prikazalo trenutnu činjenicu.

Konzumiranje REST API-ja pomoću Axiosa

Umjesto dohvati(), s kojima možete koristiti API-je Axios. Kao dohvati(), Axios vam omogućuje da šaljete zahtjeve krajnjoj točki API-ja. Međutim, postoji nekoliko razlika između njih.

• Axios automatski vraća odgovor u JSON-u dok ga morate pretvoriti u JSON kada koristite API za dohvat.
• Axios zahtijeva samo jedan povratni poziv .then() za razliku od Fetch API-ja.
• Axios je kompatibilan s glavnim preglednicima dok je Fetch podržan samo u Chromeu 42+, Edge 14+, Firefoxu 39+ i Safariju 10+

Implementacija Axiosa

Instalirajte Axios pokretanjem sljedeće naredbe.

npm install axios

Nakon dovršetka instalacije, uvezite Axios paket u komponentu aplikacije i izmijenite dohvatiFact() funkciju za korištenje.

uvoz axios iz 'axios'
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

To je to! Vaša bi aplikacija trebala prikazivati ​​nasumične činjenice o mačkama kada se učita u preglednik i kada kliknete gumb.

Više upotreba za API-je uz React

Možete koristiti REST API-je u Reactu koristeći različite metode. U ovom vodiču naučili ste kako koristiti Fetch i Axios za dohvaćanje nasumične činjenice iz REST API-ja. Slučajevi korištenja API-ja u aplikacijama u stvarnom svijetu su beskonačni.

Na primjer, putem API-ja za plaćanje kao što su Stripe i PayPal, trgovine mogu lako upravljati transakcijama kupaca na mreži bez potrebe da same implementiraju funkcionalnost. Stoga, čak i manje tehnološki pametni korisnici mogu izgraditi korisne aplikacije koje služe njihovim potrebama.

Što je API autentifikacija i kako funkcionira?

Kako dokazati da je osoba koja želi pristupiti važnim podacima ona za koju se predstavlja? Tu dolazi API autentifikacija...

Pročitajte dalje

O autoru