Večina aplikacij, ki jih ustvarjamo danes, uporablja podatke iz zunanjih virov prek API-jev. Pridobijo podatke iz strežnika in jih prikažejo v svojem uporabniškem vmesniku.

Z uporabo Reacta lahko ustvarite kavelj po meri za pridobivanje podatkov iz API-ja. Glede na URL bo ta kavelj vrnil objekt, ki vsebuje podatke in izbirno sporočilo o napaki. Ta kavelj lahko nato uporabite v komponenti.

Ustvarjanje kljuke React po meri

Začnite z ustvarjanjem nove datoteke z imenom useFetch.js. V tej datoteki ustvarite funkcijo z imenom useFetch(), ki sprejme niz URL kot parameter.

konst useFetch = (url) => {
}

Kavelj naj izvedite klic API takoj po klicu. Lahko uporabite kavelj useEffect(). za to.

Za dejanske klice API-ja uporabite API za pridobivanje. Ta API je vmesnik, ki temelji na obljubah in omogoča asinhrono pošiljanje zahtev in prejemanje odgovorov prek HTTP.

V kavelj po meri useFetch() dodajte naslednje.

uvoz {useEffect, useState} od "reagirati";
konst useFetch = (url) => {
konst [podatki, setdata] = useState(
nič);
konst [nalaganje, nastavitev nalaganja] = useState(prav);
 const [napaka, seterror] = useState("");


useEffect(() => {
 pridobi (url)
 .then((res) => res.json())
 .then((podatki) => {
seterror(podatke.napaka)
setdata(podatke.Šala)
 setloading(lažno)
 })
 }, [url]);


vrnitev { podatki, nalaganje, napaka };
};
izvozprivzeto useFetch;

V tem kavlju najprej inicializirate stanje treh vrednosti:

  • podatki: zadrži odziv API-ja.
  • napaka: zadrži sporočilo o napaki, če pride do napake.
  • nalaganje: Vsebuje logično vrednost, ki označuje, ali je pridobil podatke API. Inicializirajte stanje nalaganja na true. Ko API vrne podatke, jih nastavite na false.

Kavelj useEffect() vzame niz URL kot argument. To zagotavlja, da se zažene vsakič, ko se URL spremeni.

Funkcija useFetch() bo vrnila objekt, ki vsebuje podatke, vrednosti nalaganja in napake.

Uporaba kljuke po meri React

Če želite uporabiti kavelj po meri useFetch(), ki ste ga pravkar ustvarili, ga začnite uvoziti:

konst useFetch = zahtevati("./useFetch")

Nato ga uporabite na naslednji način:

konst {podatki, nalaganje, napaka} = useFetch (url)

Za prikaz razmislite o naslednji komponenti šal:

konst Šale = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? tip=single>";
konst { podatki, nalaganje, napaka } = useFetch (url);
če (nalaganje) vrnitev (
<div>Nalaganje...</div>
 )


vrnitev (
<div>
 {napaka &&<div>{napaka}</div>}
 {podatki &&<div>{<div>{podatki}</div>}</div>}
</div>
 );
};
izvozprivzeto šale;

Pokliče kljuko useFetch() z URL-jem do API-ja za šale in prejme podatke, vrednosti nalaganja in napake.

Če želite upodobiti komponento Šale, najprej preverite, ali je Nalaganje resnično. Če je, prikažite stavek »Nalaganje ...«, drugače upodobite podatke in sporočilo o napaki, če obstaja.

Zakaj uporabljati kljuke React po meri?

Tako kot ste uporabili kavelj po meri useFetch() v tej komponenti, ga lahko znova uporabite v drugih komponentah. To je lepota eksternalizacije logike v kavljih, namesto da bi jo zapisali v vsako komponento.

Kavlji so močna funkcija Reacta, ki jo lahko uporabite za izboljšanje modularnosti vaše kode.