Majoritatea aplicațiilor pe care le creăm astăzi consumă date din surse externe prin intermediul API-urilor. Ei preiau date de pe un server și le afișează în interfața lor de utilizare.

Folosind React, puteți crea un cârlig personalizat pentru a prelua date dintr-un API. Având o adresă URL, acest cârlig va returna un obiect care conține datele și un mesaj de eroare opțional. Puteți utiliza apoi acest cârlig într-o componentă.

Crearea unui cârlig personalizat de reacție

Începeți prin a crea un fișier nou numit useFetch.js. În acest fișier, creați o funcție numită useFetch() care acceptă un șir URL ca parametru.

const useFetch = (url) => {
}

Cârligul ar trebui efectuați apelul API imediat după ce este sunat. Puteți folosi useEffect() cârlig pentru asta.

Pentru apelurile API reale, utilizați API-ul de preluare. Acest API este o interfață bazată pe promisiuni care vă permite să faceți cereri și să primiți răspunsuri prin HTTP asincron.

În cârligul personalizat useFetch(), adăugați următoarele.

import





instagram viewer

 { useEffect, useState } din "reacţiona";
const useFetch = (url) => {
const [date, setdata] = useState(nul);
const [încărcare, setloading] = useState(Adevărat);
 const [eroare, seterror] = useState("");


useEffect(() => {
 prelua (url)
 .then((res) => res.json())
 .atunci((date) => {
seterror(date.eroare)
setdata(date.glumă)
 setloading(fals)
 })
 }, [url]);


întoarcere { date, loading, error };
};
exportMod implicit useFetch;

În acest cârlig, inițializați mai întâi starea a trei valori:

  • date: Deține răspunsul API.
  • eroare: reține un mesaj de eroare dacă apare o eroare.
  • încărcare: conține o valoare booleană care indică dacă a preluat datele API. Inițializați starea de încărcare la adevărat. Odată ce API-ul returnează date, setați-le la false.

Hook-ul useEffect() ia șirul URL ca argument. Acest lucru este pentru a vă asigura că rulează de fiecare dată când URL-ul se modifică.

Funcția useFetch() va returna un obiect care conține datele, încărcarea și valorile de eroare.

Folosind un cârlig personalizat React

Pentru a utiliza cârligul personalizat useFetch() pe care tocmai l-ați creat, începeți prin a-l importa:

const useFetch = cere(""./useFetch")

Apoi folosește-l după cum urmează:

const {date, încărcare, eroare} = useFetch (url)

Pentru a demonstra, luați în considerare următoarea componentă Glume:

const Glume = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? tip=singure>";
const { date, loading, error } = useFetch (url);
dacă (Se încarcă) întoarcere (
<div>Se încarcă...</div>
 )


întoarcere (
<div>
 {eroare &&<div>{eroare}</div>}
 {date &&<div>{<div>{date}</div>}</div>}
</div>
 );
};
exportMod implicit glume;

Apelează hook-ul useFetch() cu URL-ul către API-ul Jokes și primește datele, încărcarea și valorile de eroare.

Pentru a reda componenta Jokes, verificați mai întâi dacă Loading este adevărată. Dacă este, afișați o declarație „Se încarcă...”, altfel redați datele și mesajul de eroare, dacă există.

De ce să folosiți cârlige personalizate React?

Așa cum ați folosit cârligul personalizat useFetch() în această componentă, îl puteți reutiliza în alte componente. Aceasta este frumusețea exteriorizării logicii în cârlige în loc să o scrieți în fiecare componentă.

Cârligele sunt o caracteristică puternică a React pe care o puteți folosi pentru a îmbunătăți modularitatea codului dvs.