Enamik tänapäeval loodud rakendusi tarbib API-de kaudu andmeid välistest allikatest. Nad toovad andmeid serverist ja kuvavad need oma kasutajaliideses.

Reacti abil saate API-st andmete toomiseks luua kohandatud konksu. URL-i korral tagastab see konks andmeid sisaldava objekti ja valikulise veateate. Seejärel saate seda konksu komponendis kasutada.

Kohandatud reageerimiskonksu loomine

Alustuseks looge uus fail nimega useFetch.js. Looge selles failis funktsioon nimega useFetch(), mis aktsepteerib parameetrina URL-i stringi.

konst useFetch = (url) => {
}

Konks peaks tehke API kõne kohe pärast helistamist. Võite kasutada useEffect() konks selle jaoks.

Tegelike API-kõnede jaoks kasutage toomise API-t. See API on lubaduspõhine liides, mis võimaldab teil HTTP kaudu asünkroonselt taotlusi esitada ja vastuseid vastu võtta.

Lisage kohandatud konksule useFetch() järgmine.

importida { useEffect, useState } alates "reageerida";
konst useFetch = (url) => {
konst [andmed, setdata] = useState(null);
konst [loading, setloading] = useState(tõsi);
 const [viga, seterror] = useState("");







instagram viewer



useEffect(() => {
 too (url)
 .then((res) => res.json())
 .then((andmed) => {
seterror(andmeid.error)
seatud andmed(andmeid.nali)
 setloading(vale)
 })
 }, [url]);


tagasi { andmed, laadimine, viga };
};
eksportidavaikimisi useFetch;

Selles konksus initsialiseerite esmalt kolme väärtuse oleku:

  • andmed: sisaldab API vastust.
  • error: sisaldab veateadet, kui ilmneb tõrge.
  • laadimine: sisaldab tõeväärtust, mis näitab, kas ta on API andmed toonud. Initsialiseerige laadimisolekuks tõene. Kui API tagastab andmed, määrake need väärtuseks false.

Konks useEffect() võtab argumendina URL-i stringi. Selle eesmärk on tagada, et see käiks iga kord, kui URL muutub.

Funktsioon useFetch() tagastab objekti, mis sisaldab andmeid, laadimis- ja veaväärtusi.

React Custom Hooki kasutamine

Äsja loodud kohandatud konksu useFetch() kasutamiseks alustage selle importimisest:

konst useFetch = nõuda("./useFetch")

Seejärel kasutage seda järgmiselt:

konst {andmed, laadimine, viga} = useFetch (url)

Demonstreerimiseks kaaluge järgmist naljade komponenti:

konst Naljad = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? tüüp=üksik>";
konst { andmed, laadimine, viga } = useFetch (url);
kui (laadimine) tagasi (
<div>Laadimine...</div>
 )


tagasi (
<div>
 {viga &&<div>{error}</div>}
 {andmed &&<div>{<div>{data}</div>}</div>}
</div>
 );
};
eksportidavaikimisi Naljad;

See kutsub välja konksu useFetch() naljade API URL-iga ja võtab vastu andmed, laadimise ja veaväärtused.

Naljade komponendi renderdamiseks kontrollige esmalt, kas laadimine on tõene. Kui see on nii, kuvage teade „Laadimine…”, muidu renderdatakse andmed ja veateade, kui need on olemas.

Miks kasutada kohandatud reageerimiskonkse?

Nii nagu kasutasite selles komponendis kohandatud konksu useFetch(), saate seda ka teistes komponentides uuesti kasutada. See on loogika konksudesse välistamise ilu selle asemel, et seda igasse komponenti kirjutada.

Konksud on Reacti võimas funktsioon, mida saate kasutada oma koodi modulaarsuse parandamiseks.