Bugün oluşturduğumuz uygulamaların çoğu, API'ler aracılığıyla harici kaynaklardan veri tüketiyor. Bir sunucudan veri alırlar ve kullanıcı arayüzünde görüntülerler.

React'i kullanarak bir API'den veri almak için özel bir kanca oluşturabilirsiniz. Bir URL verildiğinde, bu kanca, verileri ve isteğe bağlı bir hata mesajını içeren bir nesne döndürür. Daha sonra bu kancayı bir bileşende kullanabilirsiniz.

Özel React Hook Oluşturma

useFetch.js adlı yeni bir dosya oluşturarak başlayın. Bu dosyada, parametre olarak bir URL dizesini kabul eden useFetch() adlı bir işlev oluşturun.

const useFetch = (url) => {
}

kanca gerekir API çağrısını yap çağrıldıktan hemen sonra. kullanabilirsiniz useEffect() kancası bunun için.

Gerçek API çağrıları için getirme API'sini kullanın. Bu API, HTTP üzerinden eşzamansız olarak istekte bulunmanıza ve yanıt almanıza olanak tanıyan söz tabanlı bir arabirimdir.

useFetch() özel kancasına aşağıdakini ekleyin.

içe aktarmak { useEffect, useState } itibaren "tepki";
const useFetch = (url) => {





instagram viewer


const [veri, setdata] = useState(hükümsüz);
const [yükleme, yükleme] = useState(doğru);
 const [hata, seterror] = useState("");


useEffect(() => {
 getir (url)
 .then((res) => res.json())
 .then((veri) => {
set hatası(veri.hata)
veri seti(veri.şaka)
 yükleniyor(yanlış)
 })
 }, [url]);


dönüş { veri, yükleme, hata };
};
ihracatvarsayılan kullanımGetir;

Bu kancada, önce üç değerin durumunu başlatıyorsunuz:

  • data: API yanıtını tutar.
  • error: Bir hata oluşursa bir hata mesajı tutar.
  • yükleniyor: API verilerini alıp almadığını gösteren bir boole değeri tutar. Yükleme durumunu true olarak başlatın. API verileri döndürdüğünde, yanlış olarak ayarlayın.

useEffect() kancası, URL dizesini argüman olarak alır. Bu, URL her değiştiğinde çalışmasını sağlamak içindir.

useFetch() işlevi, verileri, yüklemeyi ve hata değerlerini içeren bir nesne döndürür.

Bir React Özel Kancası Kullanmak

Yeni oluşturduğunuz useFetch() özel kancasını kullanmak için içe aktararak başlayın:

const useFetch = gerekmek("./useFetch")

Ardından aşağıdaki gibi kullanın:

const {veri, yükleme, hata} = useFetch (url)

Göstermek için aşağıdaki Şakalar bileşenini göz önünde bulundurun:

const Şakalar = () => {
 sabit url = "<https://sv443.net/jokeapi/v2/joke/Programming? tip=tek>";
const { veri, yükleme, hata } = useFetch (url);
eğer (Yükleniyor) dönüş (
<div>Yükleniyor...</div>
 )


dönüş (
<div>
 {hata &&<div>{hata}</div>}
 {veri &&<div>{<div>{veri}</div>}</div>}
</div>
 );
};
ihracatvarsayılan Espriler;

Şakalar API'sinin URL'si ile useFetch() kancasını çağırır ve verileri, yükleme ve hata değerlerini alır.

Şakalar bileşenini oluşturmak için önce Yüklemenin doğru olup olmadığını kontrol edin. Varsa, “Yükleniyor…” ifadesini görüntüleyin, aksi takdirde verileri ve varsa hata mesajını oluşturun.

Neden Özel Tepki Kancalarını Kullanmalısınız?

Bu bileşende useFetch() özel kancasını kullandığınız gibi, onu diğer bileşenlerde yeniden kullanabilirsiniz. Bu, mantığı her bileşene yazmak yerine kancalarda dışa vurmanın güzelliğidir.

Kancalar, kodunuzun modülerliğini geliştirmek için kullanabileceğiniz güçlü bir React özelliğidir.