Jak používat API v React Using Fetch a Axios

API (Application Programming Interface) je sada protokolů, která umožňuje aplikaci odesílat požadavky na server a přijímat odpověď.

Prostřednictvím rozhraní API jste schopni integrovat části softwaru do vaší aplikace bez složité práce. Tento proces používání API ve vaší aplikaci se obecně nazývá konzumace API. Pokud například chcete na svém webu zobrazit určité místo, místo implementace mapové funkce od začátku byste použili rozhraní Google Maps API. Rozhraní API proto snižují vaši pracovní zátěž a šetří váš čas.

Chcete-li se naučit, jak používat REST API v Reactu pomocí Fetch a Axios, vytvoříte jednoduchou aplikaci React, která získá náhodný fakt o kočkách z API, když kliknete na tlačítko.

Typy API

Rozhraní API lze klasifikovat buď podle dostupnosti, nebo podle případu použití. Z hlediska dostupnosti mohou být API veřejná, soukromá, partnerská nebo složená. Když jsou klasifikovány podle jejich účelu, mohou být databáze, vzdálená, operační systémy nebo webová rozhraní API. V tomto článku budeme používat typ webového API nazývaného REST (Representational State) API.

Rozhraní REST API vám umožňují získat data ze zdroje prostřednictvím adresy URL. V Reactu existuje několik metod, které můžete použít ke konzumaci REST API. Tento článek pojednává o dvou nejoblíbenějších metodách, jmenovitě o JavaScript Fetch API a HTTP klientovi Axios založeném na slibech.

Příbuzný: Co je REST API a jak můžete získat data pro svou aplikaci nebo web

Předpoklady

Abyste mohli postupovat podle tohoto průvodce, měli byste mít:

• Základní znalost JavaScriptu.
• Základní znalost háčků React a React.
• NPM nainstalovaný lokálně na vašem počítači.
• Nainstalovaný textový editor nebo IDE dle vašeho výběru.

Vytvořte aplikaci React

Nejprve budete muset vytvořit aplikaci React. Zkopírujte následující příkaz do svého terminálu a nastavte vývojové prostředí React.

npx create-react-app catfact

Po dokončení příkazu otevřete soubor katafakt složky ve vašem textovém editoru. Svůj kód budete psát do souboru App.js v src složku, takže pokračujte a odstraňte nepotřebný kód.

import "./App.css";
function App() {
 vrátit se (


Stiskněte tlačítko pro náhodný fakt o kočce!



Získejte fakt o kočce



 );
}
exportovat výchozí aplikaci;

Dále vytvořte jednoduché uživatelské rozhraní, které bude používat k zobrazení faktu o náhodné kočce.

v app.js

import './App.css';
function App() {
 vrátit se (


Stiskněte tlačítko pro náhodný fakt o kočce!



Získejte fakt o kočce



 );
}
exportovat výchozí aplikaci;

Chcete-li aplikaci upravit, přidejte do app.css soubor.

@import url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, hm@700;500&display=swap');
.Aplikace {
 font-family: 'Playfair Display', patka;
 okraj: 20px 15vw;
}
h2 {
 font-family: 'Playfair Display', patka;
 váha písma: 700;
 velikost písma: 3em;
}
knoflík {
 polstrování: 1 em 1,2 em;
 hranice: žádná;
 velikost písma: 1 em;
 barva pozadí: #131212;
 barva: #ffffff;
 border-radius: 0,5em;
 kurzor: ukazatel;
}
tlačítko: najet{
 background-color:#3b3b3b;
}

Vaše aplikace by nyní měla vypadat takto.

V dalších krocích načtete data z API a zobrazíte je v aplikaci.

Příbuzný: Jak vytvořit aplikaci First React pomocí JavaScriptu

Spotřeba REST API pomocí Fetch

Načíst API je rozhraní, které vám umožňuje získávat zdroje z API prostřednictvím požadavků HTTP. The vynést() metoda přijímá adresu URL cesty ke zdroji jako povinný argument a vrací příslib, který lze vyřešit na odpověď.

Základní syntaxe vynést() metoda je následující:

načíst (‘url ke zdroji’)
 .then (response => // zpracování odpovědi)
 .catch (err => // chyba zpracování)

Implementace rozhraní Fetch API

V Reactu se rozhraní Fetch API používá stejným způsobem, jakým se používá v prostém JavaScriptu.

vynést(" https://catfact.ninja/fact")
 .then (response => response.json())
 .then (data => // zpracování dat)
 .catch (err => // chyba zpracování)

V prvním řádku výše uvedeného kódu předáváte URL API do vynést() metoda. vynést() vrátí odpověď HTTP, která je převedena na JSON pomocí json() metoda. Ve třetím řádku získáte přístup k datům, která pak můžete použít v aplikaci. Konečně blok catch vám umožňuje elegantně zpracovávat chyby.

Chcete-li implementovat požadavek na načtení v komponentě aplikace, použijete háky React. Pomocí useEffect hák, vaše aplikace provede požadavek, jakmile se komponenta načte a useState hook vytvoří a aktualizuje stav komponenty. Sledování stavu zajišťuje, že se komponenta znovu vykreslí, když rozhraní fetch API vrátí odpověď.

Příbuzný: Hooks: The Hero of React

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

Vytvořte stav pro uchování faktu o kočce a funkci pro jeho aktualizaci.

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

Dále vytvořte funkci pro odeslání požadavku GET na API a zavolejte ji v useEffect háček.

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

Váš soubor app.js by nyní měl vypadat takto:

import "./App.css";
import { useEffect, useState } z "reagovat";
function App() {
 const [fact, setFact] = useState("");
 const fetchFact = () => {
 vynést(" https://catfact.ninja/fact")
 .then((response) => response.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);
vrátit se (


Stiskněte tlačítko pro náhodný fakt o kočce!



Získejte fakt o kočce
{skutečnost}




);
}
exportovat výchozí aplikaci;

Nyní byste měli být schopni vidět náhodný fakt o kočkách zobrazený ve vašem prohlížeči.

Dále napište kód, který zobrazí náhodný fakt po kliknutí na tlačítko.

Upravte tlačítko tak, aby zahrnovalo při kliknutí událost a její obslužná funkce.

 handleClick()}>Get Cat fact

Definujte handleClick() funkce, jak je uvedeno níže.

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

Nyní, když kliknete na tlačítko, handleClick() funkce zavolá fetchData() který provede API požadavek a aktualizuje stav o nový náhodný fakt. Následně se uživatelské rozhraní aplikace aktualizuje a zobrazí aktuální skutečnost.

Spotřeba REST API pomocí Axios

Namísto vynést(), můžete používat API s Axios. Jako vynést()Axios vám umožňuje zadávat požadavky na koncový bod API. Mezi těmito dvěma je však několik rozdílů.

• Axios automaticky vrátí odpověď v JSON, zatímco vy ji musíte převést na JSON, když používáte Fetch API.
• Axios vyžaduje pouze jedno zpětné volání .then() na rozdíl od Fetch API.
• Axios je kompatibilní s hlavními prohlížeči, zatímco Fetch je podporován pouze v Chrome 42+, Edge 14+, Firefox 39+ a Safari 10+

Implementace Axios

Nainstalujte Axios spuštěním následujícího příkazu.

npm nainstalovat axios

Po dokončení instalace importujte balíček Axios do komponenty aplikace a upravte jej fetchFact() funkce k jeho použití.

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

A je to! Vaše aplikace by měla zobrazovat náhodný fakt kočky, když se načte v prohlížeči a když kliknete na tlačítko.

Více využití pro API s React

REST API můžete v Reactu využívat různými metodami. V tomto tutoriálu jste se naučili používat Fetch a Axios k načtení náhodného faktu z REST API. Případy použití API v aplikacích reálného světa jsou nekonečné.

Například prostřednictvím platebních rozhraní API, jako je Stripe a PayPal, mohou obchody snadno zpracovávat transakce zákazníků online, aniž by musely samy implementovat funkce. Proto i méně technologicky zdatní uživatelé mohou vytvářet užitečné aplikace, které slouží jejich potřebám.

Co je API autentizace a jak to funguje?

Jak prokážete, že osoba, která chce získat přístup k důležitým údajům, je tím, za koho se vydává? Zde přichází na řadu API autentizace...

Přečtěte si další

O autorovi