Ako používať API v React Using Fetch a Axios

API (Application Programming Interface) je sada protokolov, ktorá umožňuje aplikácii odosielať požiadavky na server a prijímať odpoveď.

Prostredníctvom rozhraní API ste schopní integrovať časti softvéru do vašej aplikácie bez hrubej práce. Tento proces používania rozhrania API vo vašej aplikácii sa vo všeobecnosti označuje ako používanie rozhrania API. Ak napríklad chcete na svojej webovej lokalite zobraziť určité miesto, namiesto implementácie funkcie mapy od začiatku by ste použili rozhranie Google Maps API. Rozhrania API preto znižujú vaše pracovné zaťaženie a šetria váš čas.

Ak sa chcete dozvedieť, ako používať REST API v Reacte pomocou Fetch a Axios, vytvoríte jednoduchú aplikáciu React, ktorá získa náhodný fakt o mačkách z API, keď kliknete na tlačidlo.

Typy API

Rozhrania API možno klasifikovať buď podľa dostupnosti, alebo podľa prípadu použitia. Pokiaľ ide o dostupnosť, API môžu byť verejné, súkromné, partnerské alebo zložené API. Pri klasifikácii podľa účelu môžu byť databázy, vzdialené, operačné systémy alebo webové rozhrania API. V tomto článku budeme používať typ webového rozhrania API nazývaného REST (Representational State) API.

Rozhrania REST API vám umožňujú získať údaje zo zdroja prostredníctvom adresy URL. V Reacte existuje niekoľko metód, ktoré môžete použiť na používanie REST API. Tento článok pojednáva o dvoch najpopulárnejších metódach, konkrétne o JavaScript Fetch API a HTTP klientovi Axios založenom na prísľuboch.

Súvisiace: Čo je REST API a ako môžete získať údaje pre svoju aplikáciu alebo webovú stránku

Predpoklady

Ak chcete postupovať podľa tohto návodu, mali by ste mať:

• Základné pochopenie JavaScriptu.
• Základné znalosti o hákoch React a React.
• NPM nainštalovaný lokálne na vašom počítači.
• Nainštalovaný textový editor alebo IDE podľa vášho výberu.

Vytvorte aplikáciu React

Najprv budete musieť vytvoriť aplikáciu React. Skopírujte nasledujúci príkaz vo svojom termináli a nastavte vývojové prostredie React.

npx create-react-app catfact

Po dokončení vykonávania príkazu otvorte súbor katafakt priečinok vo vašom textovom editore. Svoj kód budete písať do súboru App.js v src priečinok, takže pokračujte a odstráňte nepotrebný kód.

importovať "./App.css";
function App() {
 vrátiť (


Stlačte tlačidlo pre náhodný fakt o mačke!



Získajte fakt o Cat



 );
}
exportovať predvolenú aplikáciu;

Ďalej vytvorte jednoduché používateľské rozhranie, ktoré sa bude používať na zobrazenie náhodnej skutočnosti o mačkách.

In app.js

import './App.css';
function App() {
 vrátiť (


Stlačte tlačidlo pre náhodný fakt o mačke!



Získajte fakt o Cat



 );
}
exportovať predvolenú aplikáciu;

Ak chcete upraviť svoju aplikáciu, pridajte do nej nasledujúci kód app.css súbor.

@import url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, hm@700;500&display=swap');
.App {
 font-family: 'Playfair Display', serif;
 okraj: 20px 15vw;
}
h2 {
 font-family: 'Playfair Display', serif;
 váha písma: 700;
 veľkosť písma: 3em;
}
tlačidlo {
 výplň: 1 em 1,2 em;
 hranica: žiadna;
 veľkosť písma: 1 em;
 farba pozadia: #131212;
 farba: #ffffff;
 okraj-polomer: 0,5em;
 kurzor: ukazovateľ;
}
tlačidlo: visieť{
 farba pozadia:#3b3b3b;
}

Vaša aplikácia by teraz mala vyzerať takto.

V ďalších krokoch načítate dáta z API a zobrazíte ich v aplikácii.

Súvisiace: Ako vytvoriť aplikáciu First React pomocou JavaScriptu

Spotreba REST API pomocou Fetch

Fetch API je rozhranie, ktoré vám umožňuje získavať zdroje z API prostredníctvom požiadaviek HTTP. The načítať () metóda prijme adresu URL cesty k zdroju ako povinný argument a vráti prísľub, ktorý možno vyriešiť ako odpoveď.

Základná syntax načítať () metóda je nasledovná:

načítať ('adresa URL zdroja')
 .then (response => // spracovanie odpovede)
 .catch (chyba => // chyba spracovania)

Implementácia rozhrania Fetch API

V Reacte sa Fetch API používa rovnakým spôsobom, akým sa používa v jednoduchom JavaScripte.

načítať (" https://catfact.ninja/fact")
 .then (response => response.json())
 .then (data => // spracovanie údajov)
 .catch (chyba => // chyba spracovania)

V prvom riadku vyššie uvedeného kódu odovzdávate adresu URL rozhrania API do načítať () metóda. načítať () vráti odpoveď HTTP, ktorá sa skonvertuje na JSON pomocou json() metóda. V treťom riadku získate prístup k údajom, ktoré potom môžete použiť v aplikácii. Nakoniec vám blok catch umožňuje elegantne zvládnuť chyby.

Ak chcete implementovať požiadavku na načítanie v komponente aplikácie, použijete háky React. Pomocou useEffect hák, vaša aplikácia zadá požiadavku po načítaní komponentu a useState hook vytvorí a aktualizuje stav komponentu. Sledovanie stavu zaisťuje, že komponent sa znova vykreslí, keď rozhranie fetch API vráti odpoveď.

Súvisiace: Hooks: The Hero of React

import useState a useEffect.
import { useEffect, useState } z 'react'

Vytvorte stav na uchovávanie faktu o mačke a funkciu na jeho aktualizáciu.

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

Ďalej vytvorte funkciu na odoslanie požiadavky GET do API a zavolajte ju v useEffect háčik.

const fetchFact = () => {
načítať (" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((údaje) => setFact (údaje.fakt));
}
useEffect(() => {
 fetchFact()
}, []);

Váš súbor app.js by teraz mal vyzerať takto:

importovať "./App.css";
import { useEffect, useState } z "reagovať";
function App() {
 const [fact, setFact] = useState("");
 const fetchFact = () => {
 načítať (" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((údaje) => setFact (údaje.fakt));
}
useEffect(() => {
 fetchFact()
}, []);
vrátiť (


Stlačte tlačidlo pre náhodný fakt o mačke!



Získajte fakt o Cat
{fakt}




);
}
exportovať predvolenú aplikáciu;

Teraz by ste mali byť schopní vidieť náhodný fakt o mačkách zobrazený vo vašom prehliadači.

Ďalej napíšte kód, ktorý zobrazí náhodnú skutočnosť po kliknutí na tlačidlo.

Upravte tlačidlo tak, aby obsahovalo po kliknutí udalosť a funkcia jej obsluhy.

 handleClick()}>Get Cat fact

Definujte handleClick() funkciu, ako je uvedené nižšie.

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

Teraz, keď kliknete na tlačidlo, handleClick() funkcia zavolá fetchData() ktorý vykoná požiadavku API a aktualizuje stav o nový náhodný fakt. Následne sa používateľské rozhranie aplikácie aktualizuje, aby zobrazovalo aktuálnu skutočnosť.

Spotreba REST API pomocou Axios

Namiesto načítať (), môžete používať API s Axios. Páči sa mi to načítať (), Axios vám umožňuje zadávať požiadavky na koncový bod API. Medzi nimi je však niekoľko rozdielov.

• Axios automaticky vráti odpoveď vo formáte JSON, zatiaľ čo pri použití rozhrania Fetch API ju musíte previesť na JSON.
• Axios vyžaduje iba jedno spätné volanie .then() na rozdiel od Fetch API.
• Axios je kompatibilný s hlavnými prehliadačmi, zatiaľ čo Fetch je podporovaný iba v Chrome 42+, Edge 14+, Firefox 39+ a Safari 10+

Implementácia Axios

Nainštalujte Axios spustením nasledujúceho príkazu.

npm nainštalujte axios

Po dokončení inštalácie importujte balík Axios do komponentu aplikácie a upravte ho fetchFact() funkciu používať.

importovať axios z „axios“
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

To je všetko! Vaša aplikácia by mala pri načítaní do prehliadača a po kliknutí na tlačidlo zobrazovať náhodný fakt o mačke.

Viac použití pre API s React

Rozhrania REST API môžete v Reacte využívať rôznymi spôsobmi. V tomto návode ste sa naučili, ako používať Fetch a Axios na načítanie náhodných faktov z REST API. Prípadov použitia API v aplikáciách v reálnom svete je nekonečný.

Napríklad prostredníctvom platobných rozhraní API, ako sú Stripe a PayPal, môžu obchody jednoducho spracovávať zákaznícke transakcie online bez toho, aby museli implementovať funkciu samy. Preto aj menej technicky zdatní používatelia môžu vytvárať užitočné aplikácie, ktoré slúžia ich potrebám.

Čo je autentifikácia API a ako to funguje?

Ako dokážete, že osoba, ktorá chce získať prístup k dôležitým údajom, je tým, za koho sa vydáva? Tu prichádza na rad autentifikácia API...

Prečítajte si ďalej

O autorovi