Kako porabiti API-je v Reactu z uporabo Fetch in Axios

API (Application Programming Interface) je niz protokolov, ki aplikaciji omogoča pošiljanje zahtev strežniku in prejemanje odgovora.

Preko API-jev lahko integrirate dele programske opreme v svojo aplikacijo brez drobnega dela. Ta postopek uporabe API-ja v vaši aplikaciji se na splošno imenuje poraba API-ja. Na primer, če želite na svojem spletnem mestu prikazati določeno lokacijo, bi namesto implementacije funkcionalnosti zemljevida uporabili API za Google Zemljevide. API-ji zato zmanjšajo vašo delovno obremenitev in vam prihranijo čas.

Če želite izvedeti, kako uporabljati API-je REST v Reactu z uporabo Fetch in Axios, boste zgradili preprosto aplikacijo React, ki dobi naključno dejstvo o mačkah iz API-ja, ko kliknete gumb.

Vrste API-jev

API-je lahko razvrstimo glede na razpoložljivost ali uporabo. Glede na razpoložljivost so lahko API-ji javni, zasebni, partnerski ali sestavljeni API-ji. Ko so razvrščeni glede na njihov namen, so lahko baze podatkov, oddaljenih, operacijskih sistemov ali spletnih API-jev. V tem članku bomo uporabljali vrsto spletnega API-ja, imenovano REST (reprezentativno stanje) API.

API-ji REST vam omogočajo pridobivanje podatkov iz vira prek URL-ja. V Reactu obstaja več metod, ki jih lahko uporabite za uporabo REST API-jev. Ta članek obravnava dve najbolj priljubljeni metodi, in sicer API za pridobivanje JavaScript in odjemalec HTTP Axios, ki temelji na obljubah.

Povezano: Kaj je REST API in kako lahko zgrabite podatke za svojo aplikacijo ali spletno mesto

Predpogoji

Če želite slediti tem navodilom, morate imeti:

• Osnovno razumevanje JavaScripta.
• Osnovno znanje o Reactu in React hooks.
• NPM, nameščen lokalno na vašem računalniku.
• Nameščen je urejevalnik besedil ali IDE po vaši izbiri.

Ustvarite aplikacijo React

Najprej boste morali ustvariti aplikacijo React. Kopirajte naslednji ukaz v svoj terminal, da nastavite razvojno okolje React.

npx create-react-app catfact

Ko se ukaz zaključi z izvajanjem, odprite datoteko catfact mapo v urejevalniku besedil. Svojo kodo boste zapisali v datoteko App.js v src mapo, zato nadaljujte in odstranite nepotrebno kodo.

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


Pritisnite gumb za naključno dejstvo o mačkah!



Pridobite dejstvo o mačkah



 );
}
izvoz privzete aplikacije;

Nato ustvarite preprost uporabniški vmesnik, ki bo uporabljen za prikaz naključnega dejstva o mačkah.

V app.js

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


Pritisnite gumb za naključno dejstvo o mačkah!



Pridobite dejstvo o mačkah



 );
}
izvoz privzete aplikacije;

Če želite oblikovati svojo aplikacijo, dodajte naslednjo kodo app.css mapa.

@import url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.App {
 družina pisave: 'Playfair Display', serif;
 rob: 20px 15vw;
}
h2 {
 družina pisave: 'Playfair Display', serif;
 teža pisave: 700;
 velikost pisave: 3em;
}
gumb {
 oblazinjenje: 1em 1.2em;
 obroba: brez;
 velikost pisave: 1em;
 barva ozadja: #131212;
 barva: #ffffff;
 obrobni polmer: 0,5em;
 kazalec: kazalec;
}
gumb: lebdi{
 barva ozadja:#3b3b3b;
}

Vaša aplikacija bi morala zdaj izgledati takole.

V naslednjih korakih boste pridobili podatke iz API-ja in jih prikazali v aplikaciji.

Povezano: Kako ustvariti svojo prvo aplikacijo React z JavaScript

Poraba API-jev REST z uporabo Fetch

Pridobi API je vmesnik, ki vam omogoča pridobivanje virov iz API-ja prek zahtev HTTP. The prinesi () metoda prejme URL poti do vira kot obvezen argument in vrne obljubo, ki se lahko razreši v odgovor.

Osnovna sintaksa prinesi () metoda je naslednja:

fetch('url do vira')
 .then (odziv => // obravnava odgovor)
 .catch (err => // obravnava napako)

Implementacija Fetch API

V Reactu se API Fetch uporablja na enak način kot v navadnem JavaScriptu.

prinesi (" https://catfact.ninja/fact")
 .potem (odziv => odgovor.json())
 .then (podatki => // obdelava podatkov)
 .catch (err => // obravnava napako)

V prvi vrstici zgornje kode posredujete URL API-ja v prinesi () metoda. prinesi () vrne odgovor HTTP, ki se pretvori v JSON z uporabo json() metoda. V tretji vrstici dobite dostop do podatkov, ki jih lahko nato uporabite v aplikaciji. Končno, blok catch vam omogoča elegantno ravnanje z napakami.

Za implementacijo zahteve za pridobivanje v komponenti aplikacije boste uporabili kljuke React. Z uporabo useEffect hook, bo vaša aplikacija zahtevala, ko se komponenta naloži in useState hook bo ustvaril in posodobil stanje komponente. Spremljanje stanja zagotavlja, da se komponenta ponovno upodablja, ko API za pridobivanje vrne odgovor.

Povezano: Hooks: Hero of React

uvozite useState in useEffect.
uvozi { useEffect, useState } iz 'react'

Ustvarite stanje, ki bo zadržalo dejstvo mačke in funkcijo za njegovo posodobitev.

const [dejstvo, setFact] = useState('')

Nato ustvarite funkcijo za zahtevo GET za API in jo pokličite v useEffect kavelj.

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

Vaša datoteka app.js naj bi zdaj izgledala takole:

uvoz "./App.css";
import { useEffect, useState } iz "react";
funkcija App() {
 const [dejstvo, setFact] = useState("");
 const fetchFact = () => {
 prinesi (" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);
vrnitev (


Pritisnite gumb za naključno dejstvo o mačkah!



Pridobite dejstvo o mačkah
{dejstvo}




);
}
izvoz privzete aplikacije;

Zdaj bi morali imeti možnost videti naključno dejstvo o mačkah, prikazano v vašem brskalniku.

Nato napišite kodo za prikaz naključnega dejstva, ko kliknete gumb.

Spremenite gumb, da bo vključeval onClick dogodek in njegova funkcija obvladovanja.

 handleClick()}>Pridobi dejstvo o mačkah

Določite handleClick() funkcijo, kot je prikazano spodaj.

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

Zdaj, ko kliknete gumb, se handleClick() funkcija bo poklicala fetchData() ki bo izvedla zahtevo API in posodobila stanje z novim naključnim dejstvom. Posledično se bo uporabniški vmesnik aplikacije posodobil in prikazal trenutno dejstvo.

Poraba REST API-jev z uporabo Axiosa

Namesto prinesi(), z njimi lahko uporabljate API-je Axios. Všeč mi je prinesi (), Axios vam omogoča, da zahtevate končno točko API. Vendar pa obstaja več razlik med obema.

• Axios samodejno vrne odgovor v JSON, medtem ko ga morate pretvoriti v JSON, ko uporabljate Fetch API.
• Axios zahteva samo en povratni klic .then() za razliko od API-ja Fetch.
• Axios je združljiv z večjimi brskalniki, medtem ko je Fetch podprt samo v Chrome 42+, Edge 14+, Firefox 39+ in Safari 10+

Izvajanje Axiosa

Namestite Axios tako, da zaženete naslednji ukaz.

npm install axios

Ko je namestitev končana, uvozite paket Axios v komponento aplikacije in spremenite datoteko fetchFact() funkcijo za njeno uporabo.

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

To je to! Vaša aplikacija bi morala prikazati naključno dejstvo mačka, ko se naloži v brskalnik in ko kliknete gumb.

Več uporab za API-je z Reactom

API-je REST v Reactu lahko uporabljate z različnimi metodami. V tej vadnici ste se naučili, kako uporabiti Fetch in Axios za pridobivanje naključnega dejstva iz REST API-ja. Primeri uporabe API-jev v aplikacijah v resničnem svetu so neskončni.

Na primer, prek API-jev za plačila, kot sta Stripe in PayPal, lahko trgovine zlahka upravljajo transakcije strank v spletu, ne da bi jim bilo treba sami izvajati funkcionalnost. Zato lahko še manj tehnološko podkovani uporabniki izdelajo uporabne aplikacije, ki ustrezajo njihovim potrebam.

Kaj je preverjanje pristnosti API in kako deluje?

Kako dokažete, da je oseba, ki želi dostopati do pomembnih podatkov, tista, za katero trdi, da je? Tu pride na vrsto preverjanje pristnosti API...

Preberite Naprej

O avtorju