Jak vytvořit vlastní React Hook pro volání API

Většina aplikací, které dnes vytváříme, spotřebovává data z externích zdrojů prostřednictvím API. Načítají data ze serveru a zobrazují je ve svém uživatelském rozhraní.

Pomocí Reactu můžete vytvořit vlastní hák pro načítání dat z API. Daná adresa URL vrátí tento háček objekt obsahující data a volitelnou chybovou zprávu. Tento háček pak můžete použít v komponentě.

Vytvoření vlastního React Hooku

Začněte vytvořením nového souboru s názvem useFetch.js. V tomto souboru vytvořte funkci s názvem useFetch(), která akceptuje řetězec adresy URL jako parametr.

konst useFetch = (url) => {
}

Háček by měl proveďte volání API hned po zavolání. Můžete použít háček useEffect(). pro tohle.

Pro skutečná volání API použijte rozhraní fetch API. Toto rozhraní API je rozhraní založené na slibech, které vám umožňuje asynchronně zadávat požadavky a přijímat odpovědi přes HTTP.

Ve vlastním háku useFetch() přidejte následující.

import { useEffect, useState } z "reagovat";
konst useFetch = (url) => {
konst [data, setdata] = useState(

instagram viewer
nula);
konst [načítání, načítání] = useState(skutečný);
 const [chyba, seterror] = useState("");

useEffect(() => {
 načíst (url)
 .pak((res) => res.json())
 .pak((data) => {
seterror(data.chyba)
nastavená data(data.žert)
 načítání (Nepravdivé)
 })
 }, [url]);
vrátit se { data, načítání, chyba };
};
vývoznívýchozí useFetch;

V tomto háku nejprve inicializujete stav tří hodnot:

• data: Obsahuje odpověď API.
• error: Podrží chybovou zprávu, pokud dojde k chybě.
• loading: Uchovává booleovskou hodnotu, která označuje, zda načetl data API. Inicializujte stav načítání na hodnotu true. Jakmile rozhraní API vrátí data, nastavte je na hodnotu false.

Háček useEffect() bere řetězec URL jako argument. Tím je zajištěno, že se spustí při každé změně adresy URL.

Funkce useFetch() vrátí objekt obsahující data, načítání a chybové hodnoty.

Použití vlastního háku React

Chcete-li použít vlastní háček useFetch(), který jste právě vytvořili, začněte jeho importem:

konst useFetch = vyžadovat(./useFetch")

Poté jej použijte následovně:

konst {data, loading, error} = useFetch (url)

Pro demonstraci zvažte následující komponentu Vtipy:

konst Vtipy = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? typ=jednotlivý>";
konst { data, načítání, chyba } = useFetch (url);
-li (načítání) vrátit se (
<div>Načítání...</div>
 )
vrátit se (
<div>
 {chyba &&<div>{chyba}</div>}
 {data &&<div>{<div>{data}</div>}</div>}
</div>
 );
};
vývoznívýchozí Vtipy;

Volá háček useFetch() s adresou URL rozhraní API vtipů a přijímá hodnoty dat, načítání a chyb.

Chcete-li vykreslit komponentu Vtipy, nejprve zkontrolujte, zda je načítání pravdivé. Pokud ano, zobrazte příkaz „Načítání…“, jinak vygenerujte data a případně chybovou zprávu.

Proč používat Custom React Hooks?

Stejně jako jste použili vlastní hák useFetch() v této komponentě, můžete jej znovu použít v jiných komponentách. To je krása externalizace logiky v hácích místo jejího zapisování do každé komponenty.

Háčky jsou výkonnou funkcí Reactu, kterou můžete použít ke zlepšení modularity vašeho kódu.