Fetch ve Axios Kullanarak React'te API'ler Nasıl Tüketilir?

Bir API (Uygulama Programlama Arayüzü), bir uygulamanın bir sunucuya istek göndermesine ve bir yanıt almasına izin veren bir dizi protokoldür.

API'ler aracılığıyla, önemli işler yapmadan yazılım parçalarını uygulamanıza entegre edebilirsiniz. Uygulamanızda bir API kullanma işlemine genellikle bir API tüketme denir. Örneğin, web sitenizde belirli bir konumu görüntülemek istiyorsanız, harita işlevini sıfırdan uygulamak yerine Google Haritalar API'sini kullanırsınız. API'ler bu nedenle iş yükünüzü azaltır ve size zaman kazandırır.

Fetch ve Axios kullanarak React'te REST API'lerini nasıl kullanacağınızı öğrenmek için, bir düğmeye tıkladığınızda bir API'den kediler hakkında rastgele bir bilgi alan basit bir React uygulaması oluşturacaksınız.

API türleri

API'ler, kullanılabilirlik veya kullanım durumuna göre sınıflandırılabilir. Kullanılabilirlik açısından API'ler genel, özel, ortak veya bileşik API'ler olabilir. Amaçlarına göre sınıflandırıldıklarında, veritabanı, uzaktan kumanda, işletim sistemleri veya web API'leri. Bu yazıda, REST (Representational State) adı verilen bir tür web API kullanacağız. API.

REST API'leri, bir URL aracılığıyla bir kaynaktan veri almanıza olanak tanır. React'te REST API'lerini kullanmak için kullanabileceğiniz birkaç yöntem vardır. Bu makale, JavaScript Getirme API'si ve söz tabanlı HTTP istemcisi Axios olmak üzere en popüler iki yöntemi tartışmaktadır.

İlişkili: REST API Nedir ve Uygulamanız veya Web Siteniz İçin Verileri Nasıl Alabilirsiniz?

Önkoşullar

Bu kılavuzu takip etmek için şunlara sahip olmalısınız:

• JavaScript'in temel anlayışı.
• React ve React kancaları hakkında temel bilgiler.
• NPM, makinenize yerel olarak yüklenir.
• Seçtiğiniz bir metin düzenleyici veya IDE kurulu.

Bir React Uygulaması Oluşturun

İlk olarak, bir React uygulaması oluşturmanız gerekecek. Bir React geliştirme ortamı kurmak için aşağıdaki komutu terminalinize kopyalayın.

npx oluştur-tepki-uygulama yayın durumu

Komutun yürütülmesi tamamlandığında, açın kedi gerçeği metin düzenleyicinizdeki klasör. Kodunuzu App.js dosyasına yazacaksınız. kaynak klasör bu yüzden devam edin ve gereksiz kodu kaldırın.

"./App.css" içe aktar;
işlev Uygulama() {
 dönüş (


Rastgele bir kedi gerçeği için düğmeye basın!



Kedi gerçeğini öğrenin



 );
}
varsayılan Uygulamayı dışa aktar;

Ardından, rastgele kedi gerçeğini görüntülemek için kullanacağınız basit bir kullanıcı arayüzü oluşturun.

İçinde app.js

'./App.css' içe aktarın;
işlev Uygulama() {
 dönüş (


Rastgele bir kedi gerçeği için düğmeye basın!



Kedi gerçeğini öğrenin



 );
}
varsayılan Uygulamayı dışa aktar;

Uygulamanıza stil vermek için aşağıdaki kodu ekleyin. app.css dosya.

@import url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.Uygulama {
 yazı tipi ailesi: 'Playfair Display', serif;
 kenar boşluğu: 20 piksel 15vw;
}
h2 {
 yazı tipi ailesi: 'Playfair Display', serif;
 yazı tipi ağırlığı: 700;
 yazı tipi boyutu: 3em;
}
düğme {
 dolgu: 1em 1.2em;
 sınır: yok;
 yazı tipi boyutu: 1em;
 arka plan rengi: #131212;
 renk: #ffffff;
 sınır yarıçapı: 0,5em;
 imleç: işaretçi;
}
düğme: üzerine gelin{
 arka plan rengi:#3b3b3b;
}

Başvurunuz şimdi böyle görünmelidir.

Sonraki adımlarda, API'den veri alacak ve uygulamada göstereceksiniz.

İlişkili: JavaScript ile İlk React Uygulamanızı Nasıl Oluşturursunuz?

Getirmeyi Kullanarak REST API'lerini Kullanma

API'yi getir HTTP istekleri aracılığıyla bir API'den kaynak almanızı sağlayan bir arayüzdür. bu gidip getirmek() method, kaynağa giden yolun URL'sini zorunlu bir argüman olarak alır ve bir yanıtı çözebilecek bir söz verir.

Temel sözdizimi gidip getirmek() yöntem aşağıdaki gibidir:

fetch('url'den kaynağa')
 .then (yanıt => // yanıtı ele al)
 .catch (err => // işleme hatası)

Getirme API'sini Uygulama

React'te Fetch API, düz JavaScript'te kullanıldığı şekilde kullanılır.

gidip getirmek(" https://catfact.ninja/fact")
 .then (yanıt => yanıt.json())
 .then (veri => // verileri işle)
 .catch (err => // işleme hatası)

Yukarıdaki kodun ilk satırında, API URL'sini şu adrese iletiyorsunuz: gidip getirmek() yöntem. gidip getirmek() kullanılarak JSON'a dönüştürülen bir HTTP yanıtı döndürür. json() yöntem. Üçüncü satırda, daha sonra uygulamada kullanabileceğiniz verilere erişebilirsiniz. Son olarak, yakalama bloğu, hataları incelikle işlemenizi sağlar.

Getirme isteğini uygulama bileşeninde uygulamak için React kancalarını kullanacaksınız. kullanarak kullanım Etkisi kanca, uygulamanız, bileşen yüklendiğinde ve Kullanım Durumu hook, bileşenin durumunu oluşturacak ve güncelleyecektir. Durumu takip etmek, getirme API'si yanıtı döndürdüğünde bileşenin yeniden işlenmesini sağlar.

İlişkili: Hooks: Tepki Kahramanı

useState ve useEffect'i içe aktarın.
'tepki'den { useEffect, useState } içe aktarın

Kedi gerçeğini ve onu güncelleme işlevini tutmak için bir durum oluşturun.

const [gerçek, setFact] = useState('')

Ardından, API'ye GET isteğinde bulunmak için bir işlev oluşturun ve onu kullanım Etkisi kanca.

const fetchFact = () => {
gidip getirmek(" https://catfact.ninja/fact")
 .then((yanıt) => yanıt.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 getirmeFact()
}, []);

app.js dosyanız şimdi şöyle görünmelidir:

"./App.css" içe aktar;
"tepki" den { useEffect, useState } içe aktar;
işlev Uygulama() {
 const [gerçek, setFact] = useState("");
 const fetchFact = () => {
 gidip getirmek(" https://catfact.ninja/fact")
 .then((yanıt) => yanıt.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 getirmeFact()
}, []);
dönüş (


Rastgele bir kedi gerçeği için düğmeye basın!



Kedi gerçeğini öğrenin
{hakikat}




);
}
varsayılan Uygulamayı dışa aktar;

Artık, tarayıcınızda görüntülenen kediler hakkında rastgele bir gerçeği görebilmeniz gerekir.

Ardından, düğmeye tıklandığında rastgele bir gerçeği görüntülemek için kod yazın.

Bir düğme eklemek için düğmeyi değiştirin tıklamada olay ve işleyici işlevi.

 handleClick()}>Kedi gerçeğini alın

tanımlayın tutamakClick() aşağıda gösterildiği gibi işlev görür.

const handleClick = () => {
 getirmeFact()
}

Şimdi, düğmeye tıkladığınızda, tutamakClick() fonksiyon arayacak veriyi getir() API isteğini gerçekleştirecek ve durumu yeni bir rastgele gerçekle güncelleyecektir. Sonuç olarak, uygulama kullanıcı arayüzü mevcut gerçeği gösterecek şekilde güncellenecektir.

Axios Kullanarak REST API'lerini Kullanma

Onun yerine gidip getirmek(), API'leri ile tüketebilirsiniz aksiyolar. Beğenmek gidip getirmek(), Axios, bir API uç noktasına istek göndermenize olanak tanır. Ancak, ikisi arasında birkaç fark vardır.

• Axios, Fetch API'sini kullanırken onu JSON'a dönüştürmeniz gerekirken yanıtı otomatik olarak JSON'da döndürür.
• Axios, Fetch API'sinden farklı olarak yalnızca bir .then() geri çağrısı gerektirir.
• Axios başlıca tarayıcılarla uyumludur, Fetch ise yalnızca Chrome 42+, Edge 14+, Firefox 39+ ve Safari 10+ sürümlerinde desteklenir

Axios'u Uygulamak

Aşağıdaki komutu çalıştırarak Axios'u kurun.

npm kurulum aksiyoları

Kurulum tamamlandıktan sonra, Axios paketini uygulama bileşeninize aktarın ve getirmeFact() kullanmak için işlev.

eksenleri 'axios'tan içe aktar
const fetchFact = () => {
 aksios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

Bu kadar! Uygulamanız tarayıcıya yüklendiğinde ve butona tıkladığınızda rastgele bir kedi gerçeği gösteriyor olmalıdır.

React ile API'ler için Daha Fazla Kullanım

React'te REST API'lerini çeşitli yöntemler kullanarak kullanabilirsiniz. Bu öğreticide, bir REST API'sinden rastgele bir gerçeği almak için Fetch ve Axios'u nasıl kullanacağınızı öğrendiniz. API'lerin gerçek dünya uygulamalarında kullanım durumları sonsuzdur.

Örneğin, Stripe ve PayPal gibi ödeme API'leri aracılığıyla mağazalar, işlevleri kendileri uygulamaya gerek kalmadan müşteri işlemlerini çevrimiçi olarak kolayca gerçekleştirebilir. Bu nedenle, teknoloji konusunda daha az bilgili kullanıcılar bile ihtiyaçlarına hizmet eden faydalı uygulamalar oluşturabilir.

API Kimlik Doğrulaması Nedir ve Nasıl Çalışır?

Önemli verilere erişmek isteyen kişinin söylediği kişi olduğunu nasıl kanıtlarsınız? API kimlik doğrulamasının geldiği yer burasıdır...

Sonrakini Oku

Yazar hakkında