API-k használata a Reactban a Fetch és Axios használatával

Az API (Application Programming Interface) olyan protokollkészlet, amely lehetővé teszi az alkalmazások számára, hogy kéréseket küldjenek a szervernek, és válaszokat kapjanak.

Az API-kon keresztül szoftvereket integrálhat az alkalmazásba anélkül, hogy komoly munka kellene. Az API használatának ezt a folyamatát általában API felhasználásának nevezik. Ha például egy bizonyos helyet szeretne megjeleníteni a webhelyén, akkor a Google Maps API-t használja ahelyett, hogy a térképfunkciókat a semmiből valósítaná meg. Az API-k ezért csökkentik a munkaterhelést és időt takarítanak meg.

Ha meg szeretné tudni, hogyan használhatja a REST API-kat a React alkalmazásban a Fetch és Axios segítségével, egy egyszerű React alkalmazást kell készítenie, amely véletlenszerű tényeket kap a macskákról egy API-ból, amikor rákattint egy gombra.

API-k típusai

Az API-k osztályozhatók elérhetőség vagy használati eset alapján. Az elérhetőség szempontjából az API-k lehetnek nyilvánosak, privátak, partnerek vagy összetett API-k. Céljuk szerint osztályozva lehetnek adatbázis, távoli, operációs rendszerek vagy webes API-k. Ebben a cikkben egyfajta webes API-t fogunk használni, amelyet REST-nek (Representational State) hívnak. API.

A REST API-k lehetővé teszik az adatok beszerzését egy forrásból egy URL-en keresztül. A Reactban számos módszer használható a REST API-k használatára. Ez a cikk a két legnépszerűbb módszert tárgyalja, nevezetesen a JavaScript Fetch API-t és az ígéret-alapú HTTP-kliens Axios-t.

Összefüggő: Mi az a REST API, és hogyan szerezhet be adatokat alkalmazásához vagy webhelyéhez?

Előfeltételek

Az útmutató követéséhez a következőkre van szüksége:

• A JavaScript alapvető ismerete.
• React és React hook alapismeretek.
• Az NPM helyileg telepítve van a gépen.
• Az Ön által választott szövegszerkesztő vagy IDE telepítve.

Hozzon létre egy React alkalmazást

Először létre kell hoznia egy React alkalmazást. Másolja a következő parancsot a termináljába a React fejlesztői környezet beállításához.

npx create-react-app catfact

Miután a parancs végrehajtása befejeződött, nyissa meg a katfakt mappát a szövegszerkesztőben. A kódot az App.js fájlba írja be src mappát, tehát folytassa, és távolítsa el a felesleges kódot.

import "./App.css";
function App() {
 Visszatérés (


Nyomja meg a gombot egy véletlenszerű macska tényért!



Get Cat tény



 );
}
alapértelmezett alkalmazás exportálása;

Ezután hozzon létre egy egyszerű felhasználói felületet, amely a véletlenszerű macska tény megjelenítésére szolgál.

Ban ben app.js

import './App.css';
function App() {
 Visszatérés (


Nyomja meg a gombot egy véletlenszerű macska tényért!



Get Cat tény



 );
}
alapértelmezett alkalmazás exportálása;

Az alkalmazás stílusához adja hozzá a következő kódot a app.css fájlt.

@import url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.App {
 font-family: 'Playfair Display', serif;
 margó: 20px 15vw;
}
h2 {
 font-family: 'Playfair Display', serif;
 betűsúly: 700;
 betűméret: 3em;
}
gomb {
 párnázás: 1em 1,2em;
 határ: nincs;
 betűméret: 1em;
 háttérszín: #131212;
 szín: #ffffff;
 határsugár: 0,5 em;
 kurzor: pointer;
}
button: hover{
 háttérszín:#3b3b3b;
}

Az alkalmazásának most így kell kinéznie.

A következő lépésekben lekéri az adatokat az API-ból, és megjeleníti azokat az alkalmazásban.

Összefüggő: Hogyan készítsd el First React alkalmazásodat JavaScripttel

REST API-k fogyasztása a Fetch használatával

API lekérése egy olyan interfész, amely lehetővé teszi, hogy HTTP-kéréseken keresztül erőforrásokat kapjon egy API-tól. A fetch() metódus megkapja az erőforrás elérési útjának URL-jét kötelező argumentumként, és egy ígéretet ad vissza, amely válaszként feloldható.

Az alapvető szintaxis a fetch() a módszer a következő:

fetch('URL az erőforráshoz')
 .then (response => // válasz kezelése)
 .catch (err => // kezelési hiba)

A Fetch API megvalósítása

A React alkalmazásban a Fetch API ugyanúgy használatos, mint az egyszerű JavaScriptben.

fetch(" https://catfact.ninja/fact")
 .then (response => response.json())
 .then (data => // adatkezelés)
 .catch (err => // kezelési hiba)

A fenti kód első sorában átadja az API URL-címét a fetch() módszer. fetch() HTTP-választ ad vissza, amelyet a rendszer a következővel konvertál JSON-ba json() módszer. A harmadik sorban hozzáférhet az adatokhoz, amelyeket aztán felhasználhat az alkalmazásban. Végül a catch blokk lehetővé teszi a hibák kecses kezelését.

A lekérési kérelem alkalmazáskomponensben való megvalósításához React hook-okat kell használnia. Használatával a useEffect hook, az alkalmazás akkor küldi el a kérést, ha az összetevő betöltődik, és a useState hook létrehozza és frissíti az összetevő állapotát. Az állapot nyomon követése biztosítja, hogy az összetevő újra rendereljen, amikor a lekérési API visszaküldi a választ.

Összefüggő: Hooks: The Hero of React

import useState és useEffect.
import { useEffect, useState } innen: "react"

Hozzon létre egy állapotot a macska tény tárolására és a frissítéséhez.

const [tény, setFact] = useState('')

Ezután hozzon létre egy függvényt, amely elküldi a GET kérést az API-nak, és hívja meg a useEffect horog.

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

Az app.js fájlnak most így kell kinéznie:

import "./App.css";
import { useEffect, useState } from "react";
function App() {
 const [tény, setFact] = useState("");
 const fetchFact = () => {
 fetch(" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);
Visszatérés (


Nyomja meg a gombot egy véletlenszerű macska tényért!



Get Cat tény
{tény}




);
}
alapértelmezett alkalmazás exportálása;

Most már látnia kell egy véletlenszerű tényt a macskákról a böngészőjében.

Ezután írjon kódot, hogy véletlenszerű tényt jelenítsen meg, amikor a gombra kattintanak.

Módosítsa a gombot úgy, hogy egy kattintásra esemény és kezelő funkciója.

 handleClick()}>Get Cat fact

Határozza meg a handleClick() funkciót az alábbiak szerint.

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

Most, amikor rákattint a gombra, a handleClick() függvény hívni fogja fetchData() amely végrehajtja az API kérést és frissíti az állapotot egy új véletlenszerű ténnyel. Következésképpen az alkalmazás felhasználói felülete frissül, hogy megjelenítse az aktuális tényt.

REST API-k fogyasztása Axios használatával

Ahelyett fetch(), segítségével API-kat fogyaszthat Axios. Mint fetch(), Az Axios lehetővé teszi kérések benyújtását egy API-végponthoz. A kettő között azonban több különbség is van.

• Az Axios automatikusan JSON-ban adja vissza a választ, miközben a Fetch API használatakor JSON-ba kell konvertálnia.
• Az Axios csak egy .then() visszahívást igényel, ellentétben a Fetch API-val.
• Az Axios kompatibilis a főbb böngészőkkel, míg a Fetch csak a Chrome 42+, Edge 14+, Firefox 39+ és Safari 10+ verziókban támogatott.

Az Axios megvalósítása

Telepítse az Axiost a következő parancs futtatásával.

npm install axios

A telepítés befejezése után importálja az Axios csomagot az alkalmazás összetevőjébe, és módosítsa a fetchFact() funkció használatához.

import axiókat az „axiókból”
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

Ez az! Az alkalmazásnak egy véletlenszerű macska tényt kell megjelenítenie, amikor betöltődik a böngészőben, és amikor rákattint a gombra.

További felhasználási lehetőségek az API-khoz a React segítségével

A REST API-kat különféle módszerekkel használhatja a Reactban. Ebben az oktatóanyagban megtanulta, hogyan kell a Fetch és az Axios használatával véletlenszerű tényeket lekérni egy REST API-ból. Az API-k valós alkalmazásokban való felhasználási esetei végtelenek.

Például az olyan fizetési API-kon keresztül, mint a Stripe és a PayPal, az üzletek könnyedén kezelhetik a vásárlói tranzakciókat online anélkül, hogy maguknak kellene megvalósítaniuk a funkcionalitást. Ezért a technológiailag kevésbé jártas felhasználók is képesek hasznos, igényeiket kielégítő alkalmazásokat készíteni.

Mi az API hitelesítés és hogyan működik?

Hogyan bizonyítja, hogy a fontos adatokhoz hozzáférni kívánó személy az, akinek mondja magát? Itt jön be az API hitelesítés...

Olvassa el a következőt

A szerzőről