Väčšina aplikácií, ktoré dnes vytvárame, využíva dáta z externých zdrojov prostredníctvom API. Načítavajú údaje zo servera a zobrazujú ich vo svojom používateľskom rozhraní.

Pomocou React môžete vytvoriť vlastný hák na načítanie údajov z API. Vzhľadom na adresu URL tento háčik vráti objekt obsahujúci údaje a voliteľné chybové hlásenie. Tento háčik potom môžete použiť v komponente.

Vytvorenie vlastného háku reakcie

Začnite vytvorením nového súboru s názvom useFetch.js. V tomto súbore vytvorte funkciu s názvom useFetch(), ktorá akceptuje reťazec adresy URL ako parameter.

konšt useFetch = (url) => {
}

Háčik by mal uskutočniť volanie API hneď po jeho zavolaní. Môžete použiť háčik useEffect(). pre to.

Pre skutočné volania API použite rozhranie API na načítanie. Toto rozhranie API je rozhranie založené na prísľuboch, ktoré vám umožňuje asynchrónne zadávať požiadavky a prijímať odpovede cez HTTP.

Vo vlastnom háku useFetch() pridajte nasledujúce.

importovať { useEffect, useState } od "reagovať";
konšt useFetch = (url) => {





instagram viewer


konšt [data, setdata] = useState(nulový);
konšt [loading, setloading] = useState(pravda);
 const [error, seterror] = useState("");


useEffect(() => {
 načítať (url)
 .potom((res) => res.json())
 .potom((údaje) => {
seterror(údajov.chyba)
setdata(údajov.vtip)
 načítavanie (falošný)
 })
 }, [url]);


vrátiť { údaje, načítanie, chyba };
};
exportpredvolená useFetch;

V tomto háku najprv inicializujete stav troch hodnôt:

  • údaje: Obsahuje odpoveď API.
  • error: Podrží chybové hlásenie, ak sa vyskytne chyba.
  • loading: Uchováva boolovskú hodnotu, ktorá označuje, či načítal údaje API. Inicializujte stav načítania na hodnotu true. Keď rozhranie API vráti údaje, nastavte ho na hodnotu false.

Hák useEffect() berie reťazec adresy URL ako argument. Tým sa zabezpečí, že sa spustí pri každej zmene adresy URL.

Funkcia useFetch() vráti objekt obsahujúci údaje, načítanie a chybové hodnoty.

Použitie vlastného háku React

Ak chcete použiť vlastný háčik useFetch(), ktorý ste práve vytvorili, začnite jeho importovaním:

konšt useFetch = vyžadovať(./useFetch")

Potom ho použite nasledovne:

konšt {data, loading, error} = useFetch (url)

Na demonštráciu zvážte nasledujúci komponent Vtipy:

konšt Vtipy = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? typ=single>";
konšt { data, loading, error } = useFetch (url);
ak (načítava) vrátiť (
<div>Načítava...</div>
 )


vrátiť (
<div>
 {chyba &&<div>{chyba}</div>}
 {údaje &&<div>{<div>{údaje}</div>}</div>}
</div>
 );
};
exportpredvolená vtipy;

Volá háčik useFetch() s adresou URL pre rozhranie API vtipov a prijíma údaje, načítavanie a chybové hodnoty.

Ak chcete vykresliť komponent Vtipy, najprv skontrolujte, či je Loading pravdivé. Ak áno, zobrazte vyhlásenie „Načítava sa...“, inak vykreslite údaje a chybové hlásenie, ak nejaké existuje.

Prečo používať vlastné háky React?

Rovnako ako ste použili vlastný hák useFetch() v tomto komponente, môžete ho znova použiť v iných komponentoch. To je krása externalizácie logiky v háčikoch namiesto jej zapisovania do každého komponentu.

Háčiky sú výkonnou funkciou Reactu, ktorú môžete použiť na zlepšenie modularity vášho kódu.