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

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

API (Uygulama Programlama Arabirimi), bir uygulamanın sunucuya talep göndermesine ve cevap almasına müsaade eden bir yazışma kuralı kümesidir.

API’ler vesilesiyle, nitty-gritty emek vermesi olmadan uygulamanıza yazılım parçalarını entegre edebilirsiniz. Uygulamanızda bir API kullanma işlemi çoğu zaman bir API tüketme olarak adlandırılır. Mesela, web sitenizde belirli bir konumu görüntülemek istiyorsanız, harita işlevselliğini sıfırdan uygulamak yerine Google Haritalar API’sini kullanırsınız. Api’ler bu yüzden iş yükünüzü azaltır ve size vakit kazandırır.

Fetch ve Axios kullanarak React’te REST API’lerini iyi mi tüketeceğinizi öğrenmek için, bir düğmeyi tıklattığınızda bir API’den kediler hakkında rastgele bir gerçek alan kolay bir React uygulaması oluşturacaksınız.

API türleri

API’ler kullanılabilirlik yada kullanım durumuna nazaran sınıflandırılabilir. Kullanılabilirlik açısından API’ler her insana açık, hususi, iş ortağı yada bileşik API’ler olabilir. Amaçlarına nazaran sınıflandırıldıklarında veritabanı, uzak, işletim sistemleri yada web API’leri olabilirler. Bu makalede, REST (Temsili Durum) API’si isminde olan bir web API türü tüketeceğiz.

REST API’leri, bir KAYNAKTAN URL vesilesiyle veri almanızı sağlar. React’te, REST API’lerini kullanmak için kullanabileceğiniz birkaç yöntem vardır. Bu makalede, javascript fetch API’si ve söz tabanlı HTTP istemcisi Axios şeklinde en popüler iki yöntem anlatılmaktadır.

İlgili: REST API Nedir ve Uygulamanız yada Web Siteniz İçin Iyi mi Veri Alabilirsiniz?

Önkoşullar

Bu kılavuzu kovuşturmak için şunları yapmalısınız:

  • JavaScript’in temel anlayışı.
  • React ve React kancaları hakkında temel data.
  • NPM makinenize mahalli olarak yüklenir.
  • Seçtiğiniz bir metin düzenleyicisi yada IDE yüklü.

React Uygulaması Oluşturma

İlk olarak, bir React uygulaması oluşturmanız gerekir. React geliştirme ortamı ayarlamak için terminalinizde aşağıdaki komutu kopyalayın.

npx create-react-app catfact

Komut yürütmeyi tamamladıktan sonrasında, katarakt klasörüne tıklayın. Kodunuzu Uygulama.js dosyasında Src klasörü bu yüzden devam edin ve gereksiz kodu kaldırın.

import "./App.css";
function App() {
return (

Press the button for a random cat fact!




);
}
export default App;

Arkasından, rastgele kedi gerçeğini görüntülemek için kullanılacak kolay bir kullanıcı arabirimi oluşturun.

İçinde uygulama.js

import './App.css';
function App() {
return (

Press the button for a random cat fact!




);
}
export default App;

Uygulamanızı stilize etmek için aşağıdaki kodu uygulama.css dosya.

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@700;500&display=swap');
.App {
font-family: 'Playfair Display', serif;
margin: 20px 15vw;
}
h2 {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 3em;
}
button {
padding: 1em 1.2em;
border: none;
font-size: 1em;
background-color: #131212;
color: #ffffff;
border-radius:0.5em;
cursor: pointer;
}
button:hover{
background-color:#3b3b3b;
}

Uygulamanız şimdi bu şekilde görünmelidir.

Sonraki adımlarda, API’den veri getirecek ve uygulamada görüntüleyeceksiniz.

İlgili: JavaScript ile İlk React Uygulamanızı Oluşturma

Fetch Kullanarak REST API’lerini Tüketme

Fetch API, HTTP istekleri vesilesiyle bir API’den kaynak almanızı elde eden bir arabirimdir. Bu, bir sonraki getir() yöntemi, kaynağın yolunun URL’sini mecburi bağımsız değişken olarak alır ve bir yanıta çözümlenebilen bir söz döndürür.

Temel sözdizimi getir() yöntemi aşağıdaki gibidir:

fetch(‘url to resource’)
.then(response => // handle response)
.catch(err => // handle error)

Getir API’sini Uygulama

React’te Fetch API’si, düz JavaScript’te kullanıldığı şeklinde kullanılır.

fetch("https://catfact.ninja/fact")
.then(response => response.json())
.then(data => // handle data)
.catch(err => // handle error)

Yukarıdaki koddaki ilk satırda, API URL’sini getir() yöntem. getir() kullanılarak JSON’a dönüştürülen bir HTTP yanıtı döndürür json() yöntem. Üçüncü satırda, ondan sonra uygulamada kullanabileceğiniz verilere erişebilirsiniz. Son olarak, catch bloğu hataları zarif bir halde işlemenizi sağlar.

Getirme isteğini uygulama bileşeninde uygulamak için React kancalarını kullanacaksınız. Kullanarak useEffect kanca, uygulamanız bileşen yüklendikten sonrasında isteği yapar ve useState kanca bileşenin durumunu oluşturur ve güncelleştirir. Durumu seyretmek, fetch API’si yanıtı döndürdürse bileşenin tekrardan işlemesini sağlar.

İlgili: Kancalar: Tepki Kahramanı

import useState and useEffect.
import { useEffect, useState } from 'react'

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

const (fact, setFact) = useState('')

Arkasından, API’ye GET isteğinde bulunmak için bir işlev oluşturun ve useEffect kanca.

const fetchFact = () => {
fetch("https://catfact.ninja/fact")
.then((response) => response.json())
.then((data) => setFact(data.fact));
}
useEffect(() => {
fetchFact()
}, ());

Uygulamanızın .js dosyası artık şöyleki görünmelidir:

import "./App.css";
import { useEffect, useState } from "react";
function App() {
const (fact, setFact) = useState("");
const fetchFact = () => {
fetch("https://catfact.ninja/fact")
.then((response) => response.json())
.then((data) => setFact(data.fact));
}
useEffect(() => {
fetchFact()
}, ());
return (

Press the button for a random cat fact!



{fact}


);
}
export default App;

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

Arkasından, düğme tıklatıldığında rastgele bir gerçeği görüntülemek için kod yazın.

Düğmeyi bir onClick vaka ve işleyici işlevi.


handleClick() aşağıda gösterildiği şeklinde işlev görür.

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

Şimdi, düğmeye tıkladığınızda, handleClick() işlevi çağırır fetchData() API isteğini gerçekleştirecek ve durumu yeni bir rastgele gerçekle güncelleyecektir. Netice olarak, uygulama kullanıcı arabirimi geçerli gerçeği görüntülemek için güncellenir.

Axios Kullanarak REST API’lerini Tüketme

Onun yerine getir(), API’leri Axios ile tüketebilirsiniz. Benzer biçimde getir(), Axios bir API uç noktasına istekte bulunmanızı sağlar. Sadece, ikisi içinde birkaç fark vardır.

  • Axios, Getir API’sini kullanırken yanıtı otomatikman JSON’a dönüştürmeniz gerekirken JSON’da döndürür.
  • Axios, Fetch API’sinin aksine yalnızca bir .o vakit() geri arama gerektirir.
  • Fetch yalnızca Chrome 42+, Edge 14 +, Firefox 39+ ve Safari 10+’da desteklenirken Axios büyük tarayıcılarla uyumludur

Axios’un Uygulanması

Aşağıdaki komutu çalıştırarak Axios’u yükleyin.

npm install axios

Yükleme tamamlandıktan sonrasında, Axios paketini uygulama bileşeninize içe aktarın ve fetchFact() işlevini kullanır.

import axios from ‘axios’
const fetchFact = () => {
axios.get("https://catfact.ninja/fact").then((response) => {
setFact(response.data.fact)
});
}

İşte bu! Uygulamanız tarayıcıda yüklendiğinde ve düğmeyi tıklattığınızda rastgele bir kedi gerçeği görüntülemelidir.

Rastgele bir kedi gerçeği gösteren react uygulaması

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

Çeşitli yöntemler kullanarak React’te REST API’lerini kullanabilirsiniz. Bu öğreticide, rest API’sinden rastgele bir gerçeği getirmek için Fetch ve Axios’un iyi mi kullanılacağını öğrendiniz. Gerçek dünyadaki uygulamalarda API’lerin kullanım durumları sonsuzdur.

Mesela, Stripe ve PayPal şeklinde ödeme API’leri vesilesiyle mağazalar, işlevselliğin kendilerinin uygulanmasına gerek kalmadan alan kişi işlemlerini çevrimiçi olarak kolayca işleyebilir. Bundan dolayı, daha azca teknoloji meraklısı kullanıcılar gereksinimlerine hizmet eden yararlı uygulamalar oluşturabilir.

Yorum Yap
0 Yorum yapan