React İle Fetch Api Kullanma

React ile uygulama geliştirirken çoğu zaman APIler üzerinden veri alıp kullanıyoruz. Bunun için APIler istek atmak ve sonuçlarını alarak işlemek gerekmektedir. Bunun için farklı kütüphaneler olsa da Javascript Fetch Api ek bir kütüphaneye ihtiyaç duymadan kullanabileceğimiz bir arayüzdür.

Kullanımı kolay olması ve hataları da yakalayabilmesi nedeni ile tercih edilebilir.

React Fetch Api Nedir?

Fetch Api Javascript ile gelen bir API arayüzüdür. Farklı sunuculardaki endpointlere istek atarak oradan veri almak veya farklı sunuculara veri göndermek için kullanılır.

Örneklerle JavaScript Fetch Api Kullanımı yazımızda Fetch Api nedir konusunu inceliyoruz.

React bir Javascript frameworkü olduğundan APIlere istek atmak için Fetch Api kullanılabilir.

React ve Fetch Api

React uygulamalarında Fetch API kullanmak oldukça basittir. Öncelikle, Fetch API’yi kullanarak verileri almak için bir HTTP isteği göndermemiz gerekiyor. Bu istek gönderildiğinde, API’den gelen verileri alıp işleyebiliriz. Fetch API, birçok farklı veri türü (JSON, XML, text, vb.) için destek sağlar.

Fetch API kullanarak verileri alma işlemi genellikle bir bileşenin componentDidMount() veya useEffect() yöntemlerinde gerçekleştirilir. Bu yöntemler, bileşenin render() yöntemi çağrılmadan önce bir kez çağrılır.

Bununla birlikte bir butona tıklandığında veya herhangi bir olay sonucunda da Fetch api çağrılarak hedefden veri alanabilir. Ve tabii ki sunucuya veri de gönderilebilir.

React ve Fetch Api Örnek Uygulama

Şimdi örnek bir uygulama yaparak, uygulama geliştiriciler için ücretsiz fake API sağlayan https://jsonplaceholder.typicode.com/ üzerinden kullanıcı bilgilerini alarak sayfamızda listeleyelim.

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

function App() {
  const [data, setData] = useState([]);
  const apiUrl = 'https://jsonplaceholder.typicode.com/users';

  const fetchData = () => {
    fetch(apiUrl)
    .then(res => res.json())
    .then(data => setData(data))
    .catch(error => {
        console.log("Bir hata oluştu : ", error);
        setData([]); 
    });
  }

    useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Uygulamamız görüldüğü gibi oldukça basit. Fetch Api’yi kullanmak için herhangi birşey import etmiyoruz. Çünkü Javascript ile gelen bir arayüz.

Öncelikle state üzerinde data değişkenini tanımlıyoruz. Bu değişken sayfa üzerinde listeleyeceğimiz üye bilgilerini tutacak. Değiştirmek için ise bildiğiniz gibi setData metodunu kullanacağız.

State üzerinde değişken tanımlamamızın sebebi, veri geldiğinde o veriyi hemen render edebilmek.

Komponen yüklendiğinde useEffect hooku çalışacak ve bu sayede fetchData fonksiyonu çağırılacak. Bu fonksiyon içerisinde kullandığımız fetch metodu verdiğimiz urlleye bir istek atacak ve sonucu bekleyecektir.

Eğer olumlu bir sonuç gelirse ilk then bloğu gelen cevabı (response) alacak ve ikinci then bloğunda ise gelen bu cevap üzerinde bulunan veri alınarak kullanılmaktadır. Aldığımız veriyi setDataya parametre olarak vererek data değişkenimizi güncelliyoruz.

State üzerindeki bu değişken güncellendiğinden, return bloğu içerisindeki data.map bölümü işleme alınarak gelen veri bir liste halinde yazdırılır.

Gelen veri

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  ...
]

formatındadır. Gelen veriden id değerini li etiketine key parameteresi olarak geçiyoruz. Ve li tagı içerisinde kullanıcı ismini yazdırıyoruz.

Eğer işlem sonucunda bir hata oluşursa bu durumda cathc bloğu devreye girer. Hata anında yapmak istediklerimizi bu bölümde yapabiliriz. Örneğimizde konsola gelen hatayı yazdırdık ve sonrasında setData([]) diyerek veriye boş bir dizi atadık.

Örneğimizde Fetch Api Promise yapısı ile kullanıldı. Eğer istersek aynı işlemi async – await yapısı ile de yapabiliriz. Bunun için konumuzu fetchData bölümünü şu şekilde yapabiliriz.

const fetchData = async () => {
  try {
    const response = await fetch(apiUrl);
    const data = await response.json();
    setData(jsonData);
  } catch (error) {
    console.error(error);
    setData([]);
  }
}

Dikkat ettiyseniz async – await kullanımında try-catch kullanarak hata yakalamayı denedik. Kullanmadan da aynı işlemi yapabilirdik, fakat bir hata olduğunda uygulamamızın nasıl davranacağını denetlemek istediğimizden try-catch kullanmayı tercih ediyoruz.

Sonuç

Çok kullanılan ve Javascript ile birlikte geldiği için ek bir paket kullanmayı gerektirmeyen Fetch Api, APIler üzerinden veri almak ve APIlere veri göndermek için kullabileceğimiz kolay bir api arayüzüdür.

Javascript veya React hakkında sormak istediklerinizi yorumlardan bize iletebilirsiniz.