React'te Fetch API'leri Nasıl Kullanılır

Modern web geliştirmede, harici kaynaklardan veri entegrasyonu yaygın bir gerekliliktir. Kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kütüphanesi olan React, API'lerden veri getirmek için basit bir yol sunar.

Bu rehberde, pratik bir örnek eşliğinde React'te bir API'den veri getirme sürecini inceleyeceğiz. Dahası, Apidog'da tek tıkla Fetch Client kodu oluşturmanın basit bir yolunu sunacağız.

button

API Nedir?

Bir API (Application Programming Interface), farklı yazılım uygulamalarının birbiriyle iletişim kurmasını ve etkileşimde bulunmasını sağlayan bir dizi kural ve protokoldür.

Örneğin, telefonunuzdaki bir hava durumu uygulamasını kullandığınızda, konumunuz için güncel hava durumu verilerini almak için muhtemelen bir hava durumu hizmetinin API'siyle etkileşim kurar. Uygulama, belirli bir formatı izleyerek hava durumu hizmetinin API'sine bir istek gönderir ve API, istenen hava durumu bilgileriyle yanıt verir, bu da iki yazılım sistemi arasındaki sorunsuz entegrasyonu kolaylaştırır.

Fetch API ile React'te API'ler Oluşturma

Fetch API, tarayıcıdan GET ve POST gibi HTTP istekleri yapmak için modern bir arayüz sağlar. İstekler ve yanıtlarla çalışmayı kolaylaştıran JavaScript vaatlerini kullanır. Bir istek yapmak için, fetch() yöntemini çağırmanız, getirmek için URL'yi geçirmeniz ve ardından çözüldüğünde yanıtı işlemeniz yeterlidir. Bu, doğrudan XMLHttp İstekleri ile çalışmaktan çok daha basittir.

Fetch'i React ile kullanırken, useEffect gibi bileşen yaşam döngüsü yöntemlerinde istekler yapabilir ve veri alındığında bileşen durumunu güncelleyebilirsiniz. Bu, bir API'den veri getirmenize ve UI'nızda görüntülemenize olanak tanır.

Fetch API, her ikisi de vaatleri kullandığı için React ile güzel bir şekilde entegre olur. Kullanıcı için deneyimi sorunsuz hale getirmek için yükleme ve hata durumlarını işleyebilirsiniz. Genel olarak, Fetch, React ile birleştirildiğinde, veri odaklı tek sayfalık uygulamalar oluşturmak için çok güçlü bir kombinasyondur.

React'te Fetch API'lerini Ayrıntılı Örnekle Nasıl Kullanılır

JavaScript kütüphanesine aşina olanlar için, React'te Fetch API'sini kullanmanın başka bir yolu.

Bir React Uygulaması Oluşturun

Bir React projesi kurmak bir dizi adım içerir. İşte başlamanıza yardımcı olacak temel bir rehber:

1. Node.js ve npm'yi yükleyin: https://nodejs.org/ adresinden Node.js ve npm'yi indirin ve yükleyin.

2. Bir React Uygulaması Oluşturun: Terminalinizi açın ve npx create-react-app my-react-app komutunu çalıştırın. "my-react-app" ifadesini tercih ettiğiniz proje adıyla değiştirin.

3. Geliştirme Sunucusunu Başlatın:

cd my-react-app komutuyla proje klasörünüze gidin.
npm start komutuyla geliştirme sunucusunu başlatın.
React uygulamanız tarayıcıda http://localhost:3000/ adresinde açılacaktır.

Bu kadar! Sadece üç basit adımda başarıyla bir React uygulaması oluşturdunuz. Artık kodunuza dalabilir, değişiklikler yapabilir ve uygulamanızı geliştirirken değişiklikleri gerçek zamanlı olarak görebilirsiniz.

React'te Fetch API'sini Kullanın

React'te Fetch API'sini kullanmak, harici kaynaklara veya API'lere HTTP istekleri yapmayı içerir. İşte bir React bileşeninde Fetch API'sini nasıl kullanacağınıza dair basit bir rehber:

Adım 1: React ve useState Hook'unu İçe Aktarın

import React, { useState, useEffect } from 'react';

Adım 2: Fonksiyonel Bir Bileşen Oluşturun

function MyComponent() {
  // Getirilen verileri depolamak için durum
  const [data, setData] = useState(null);

  // Bileşen monte edildiğinde veri getirmek için efekt
  useEffect(() => {
    fetchData();
  }, []); // Boş bağımlılık dizisi, efektin montajda bir kez çalışmasını sağlar

  // Veri getirme işlevi
  const fetchData = async () => {
    try {
      // Fetch API'sini kullanarak bir GET isteği yapın
      const response = await fetch('https://api.example.com/data');
      
      // Yanıtın başarılı olup olmadığını kontrol edin (durum kodu 200-299)
      if (!response.ok) {
        throw new Error('Ağ yanıtı tamamlanmadı');
      }

      // Yanıttan JSON verilerini ayrıştırın
      const result = await response.json();

      // Durumu getirilen verilerle güncelleyin
      setData(result);
    } catch (error) {
      console.error('Veri getirilirken hata oluştu:', error.message);
    }
  };

  // Bileşeni oluştur
  return (
    <div>
      {data ? (
        // Getirilen verileri görüntüle
        <p>{JSON.stringify(data)}</p>
      ) : (
        // Veri getirilirken bir yükleme mesajı veya başka bir UI görüntüle
        <p>Yükleniyor...</p>
      )}
    </div>
  );
}

export default MyComponent;

Adım 3: Bileşeni Kullanın

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>React Fetch Örneği</h1>
      <MyComponent />
    </div>
  );
}

export default App;

Bu örnekte:

fetch işlevini, varsayımsal bir API uç noktasına (https://api.example.com/data) bir GET isteği yapmak için kullanıyoruz.
Yanıtı işliyoruz, başarılı olup olmadığını kontrol ediyoruz ve JSON verilerini ayrıştırıyoruz.
Getirilen veriler, setData işlevi kullanılarak bileşenin durumunda saklanır.
Bileşen, duruma bağlı olarak getirilen verileri veya bir yükleme mesajını oluşturur.

Apidog ile Tek Tıkla İstemci Kodu Oluşturma

Arka uç hizmetleriyle sorunsuz entegrasyon, genellikle fetch API aracılığıyla elde edilen, ön uç geliştirmenin bir mihenk taşıdır. Bu arayüz, doğrudan tarayıcıdan basit HTTP isteklerini kolaylaştırır ve React uygulamalarına, arka uçlardan veya harici API'lerden verileri verimli bir şekilde alma kapasitesi sağlar.

API isteklerinin ayrıntılı kodlamasını React içinde zor bulan geliştiriciler için, Apidog gibi tek tıkla istemci kodu oluşturma araçları değerli bir zaman kazandırıcı sunar. İşte bir örnek olarak bir POST pet mağazası API'si.

İstemci kodunu aşağıdaki gibi oluşturmak için simgeye tıklayın:

İşte Fetch Veri sonucu.

Apidog, arka uç API spesifikasyonlarını, istemci tarafı için hazır kodlara dönüştürerek, ihtiyaç duyulan veri yapılarını ve uç noktaları tam olarak eşleştirerek ve manuel kodlamayla ilişkili karmaşıklık ve hatalardan kaçınarak bu süreci basitleştirir.

Oluşturulan İstemci Kodunu Bir React Uygulamasına Entegre Edin

Oluşturulan istemci kodu, şu genel adımlar izlenerek bir React uygulamasına entegre edilebilir:

Oluşturulan Dosyaları React Uygulamasına İçe Aktarın: Oluşturulan dosyaları (veya tüm klasörü) React projenize kopyalayın. Bu dosyaların proje yapınızla uyumlu olduğundan emin olun.

2. Oluşturulan API İstek İşlevlerini İçe Aktarın ve Kullanın: React bileşeninizde veya başka bir uygun konumda, oluşturulan API istek işlevlerini içe aktarın ve kullanın. Örneğin:

import { createPet, getPetById } from './path/to/generated/api';

// Bir bileşende veya başka bir yerde kullanın
async function fetchData() {
  try {
    const newPet = await createPet({ name: 'Fido', age: 2 });
    const petDetails = await getPetById(newPet.id);
    console.log(petDetails);
  } catch (error) {
    console.error('Veri getirilirken hata oluştu:', error.message);
  }
}

3. Verileri İşleyin: API isteklerinden döndürülen verileri işleyin, potansiyel olarak bileşen durumunu güncelleyin, UI'yi oluşturun, vb.

Apidog'un Bonus İpucu:

Apidog'dan yararlanmanın avantajı, geliştiricilerin arka uç yanıtlarını taklit etmelerine olanak tanıyan, erken geliştirme aşamalarında veya arka uç API'leri henüz hazır olmadığında kritik bir yetenek olan, taklit özelliğine kadar uzanır.

Bu taklit veriler, ön uç geliştirmenin zamanında kalmasını sağlar, kullanıcı arayüzü, kullanıcı deneyimi ve genel uygulama mantığı üzerinde, arka uç hazır olma durumuna bağlı olmadan çalışmaya izin verir.

button