Lielākā daļa šodien izveidoto lietojumprogrammu patērē datus no ārējiem avotiem, izmantojot API. Viņi iegūst datus no servera un parāda tos savā lietotāja saskarnē.

Izmantojot React, varat izveidot pielāgotu āķi, lai iegūtu datus no API. Ja ir norādīts URL, šis āķis atgriezīs objektu, kas satur datus un neobligātu kļūdas ziņojumu. Pēc tam varat izmantot šo āķi komponentā.

Pielāgota reakcijas āķa izveide

Sāciet, izveidojot jaunu failu ar nosaukumu useFetch.js. Šajā failā izveidojiet funkciju useFetch(), kas kā parametru pieņem URL virkni.

konst useFetch = (url) => {
}

Āķim vajadzētu veikt API zvanu uzreiz pēc tā izsaukšanas. Jūs varat izmantot useEffect() āķis priekš šī.

Faktiskajiem API izsaukumiem izmantojiet ieneses API. Šī API ir uz solījumu balstīta saskarne, kas ļauj asinhroni veikt pieprasījumus un saņemt atbildes, izmantojot HTTP.

Pielāgotajā āķī useFetch() pievienojiet tālāk norādīto.

imports { useEffect, useState } no "reaģēt";
konst useFetch = (url) => {
konst [dati, setdata] = useState(null);
konst [loading, setloading] = useState(taisnība);
 const [kļūda, seterror] = useState("");







instagram viewer



useEffect(() => {
 atnest (url)
 .hen((res) => res.json())
 .hen((dati) => {
seterror(datus.kļūda)
setdata(datus.joks)
 setloading(viltus)
 })
 }, [url]);


atgriezties {dati, ielāde, kļūda};
};
eksportētnoklusējuma useFetch;

Šajā āķī vispirms tiek inicializēts trīs vērtību stāvoklis:

  • dati: satur API atbildi.
  • error: saglabā kļūdas ziņojumu, ja rodas kļūda.
  • ielāde: satur Būla vērtību, kas norāda, vai ir iegūti API dati. Inicializējiet ielādes stāvokli uz patiesu. Kad API atgriež datus, iestatiet to uz false.

Āķis useEffect() izmanto URL virkni kā argumentu. Tas ir paredzēts, lai nodrošinātu, ka tas darbojas katru reizi, kad mainās URL.

Funkcija useFetch() atgriezīs objektu, kurā ir datu, ielādes un kļūdu vērtības.

Izmantojot React Custom Hook

Lai izmantotu tikko izveidoto pielāgoto āķi useFetch(), sāciet ar tā importēšanu:

konst useFetch = pieprasīt(./useFetch)

Pēc tam izmantojiet to šādi:

konst {dati, ielāde, kļūda} = useFetch (url)

Lai parādītu, apsveriet šādu joku komponentu:

konst Joki = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? tips = viens>";
konst {dati, ielāde, kļūda} = useFetch (url);
ja (ielādē) atgriezties (
<div>Notiek ielāde...</div>
 )


atgriezties (
<div>
 {kļūda &&<div>{error}</div>}
 {dati &&<div>{<div>{data}</div>}</div>}
</div>
 );
};
eksportētnoklusējuma Joki;

Tas izsauc useFetch() āķi ar vietrādi URL uz joku API un saņem datu, ielādes un kļūdu vērtības.

Lai renderētu komponentu Joki, vispirms pārbaudiet, vai Ielāde ir patiesa. Ja tā ir, parādiet paziņojumu “Notiek ielāde…”, pretējā gadījumā tiek renderēti dati un kļūdas ziņojums, ja tāds ir.

Kāpēc izmantot pielāgotus reaģēšanas āķus?

Tāpat kā šajā komponentā izmantojāt pielāgoto āķi useFetch(), varat to atkārtoti izmantot citos komponentos. Tas ir tas skaistums, ka loģika tiek izmantota āķos, nevis ierakstīta katrā komponentā.

Āķi ir jaudīga React funkcija, ko varat izmantot, lai uzlabotu sava koda modularitāti.