API Nedir, React Fetch ve Axios Kullanımı

API, “Application Programming Interface” yani “Uygulama Programlama Arayüzü” anlamına gelir. Bir API, farklı yazılım uygulamaları arasında iletişim ve veri alışverişini kolaylaştıran bir arabirimdir. API’ler, bir uygulamanın diğer bir uygulamanın sunduğu işlevleri ve verilere erişebilmesi için standart bir yöntem sağlar.

Örneğin, bir hava durumu uygulaması, hava durumu sağlayan bir API’yi kullanarak güncel verileri alabilir. API’ler, genellikle aşağıdaki gibi kullanılır:

1. Veri Çekme: Bir sistemden veri alarak kendi uygulamanızda kullanma (örneğin, hava durumu bilgisi çekme).
2. Veri Gönderme: Bir sisteme veri göndererek belirli işlemleri gerçekleştirme (örneğin, bir mesaj gönderme işlemi).
3. İşlem Yapma: Bir sistemde bir işlem gerçekleştirme (örneğin, ödeme işlemi başlatma veya hesap açma).

API’ler sayesinde, geliştiriciler belirli işlevleri sıfırdan geliştirmek zorunda kalmaz, başka sistemlerin sunduğu hazır fonksiyonları kullanarak projelerini daha hızlı ve verimli bir şekilde hayata geçirebilir.

React’ta API Kullanımı

React’ta API kullanımı, uygulamanızın dış kaynaklardan veri almasını veya veri göndermesini sağlar. Bu işlem genellikle fetch veya axios gibi HTTP istemcileriyle yapılır ve verileri almak, saklamak veya güncellemek için React’ın durum yönetimi özellikleri kullanılır. En sık kullanılan yöntem, useEffect hook’u yardımıyla bileşen yüklendiğinde veya belirli bir durum değiştiğinde API çağrısı yapmaktır.

React’ta Fetch veya axios yaygın olarak kullanılan yöntemlerdir. Esasen bu yöntemler asenkron yapıları senkron olarak yönetmemizi sağlar. Bir işlemi başlat, bitsin sonra diğer adıma geç diyoruz yani. İlk yapılan istekten yanıt gelmez ise kodun geri kalanı düzgün çalışmayacaktır.

İşte bir API çağrısının temel adımları:

1. Axios veya Fetch Kullanarak Veri Çekme: API ile işlem yapmak için fetch veya axios kullanılır.
2. useEffect ile İlk Yüklemede API Çağrısı Yapma: Bileşen yüklendiğinde otomatik olarak çağrı yapılması için useEffect hook’u kullanılır.
3. useState ile Gelen Veriyi Saklama: API’den gelen verileri göstermek için useState ile bir durum oluşturulur.

Fetch ile API Kullanımı

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

function App() {
  const [data, setData] = useState([]); // Gelen veriyi saklayacak state

  useEffect(() => {
    // API'ye çağrı yapılır
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => setData(data)) // Gelen veriyi state'e kaydeder
      .catch((error) => console.error('Hata:', error)); // Hata yönetimi
  }, []); // Boş bir bağımlılık dizisi, sadece bileşen ilk yüklendiğinde çalışır

  return (
    <div>
      <h1>Post Listesi</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Axios ile API Kullanımı

import { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";

const BASE_URL = "https://jsonplaceholder.typicode.com/";

function App() {
  const [data, setData] = useState(null);

  const getAllPosts = async () => {
    const response = await axios.get(BASE_URL + "posts");
    setData(response.data);
  };

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

  return (
    <div>
      {data ? (
        data.map((post, index) => (
          <div className="post-div" key={index}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </div>
        ))
      ) : (
        <p>Yükleniyor...</p>
      )}
    </div>
  );
}

export default App;

Yukarıda 2 farklı şekilde API işlemi yapılmıştır. Yoğun olarak basitliğinden ve kullanım kolaylığından dolayı axios kütüphanesi çoklukla kullanılıyor. Umarım açıklayıcı olmuştur.

Konu ile ilgili github hesabımda çeşitli projeler mevcut. Bu projelerde get, post, put, delete işlemleri uygulamalı olarak yapılmıştır. Buradan github hesabıma ulaşabilirsiniz.

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.