React: Fetch API ve Servisler

[Bekig]

React ile modern web uygulamaları geliştirirken, verileri uzaktan almak ve işlemek için Fetch API en yaygın yöntemlerden biridir. Bu yazıda, Fetch API’nin ne olduğunu ve React uygulamalarında nasıl kullanılacağını detaylı bir şekilde inceleyeceğiz.

Giriş

Web uygulamaları, verileri genellikle sunuculardan alarak kullanıcıya sunar. İşte bu noktada Fetch API devreye girer. Fetch API, JavaScript üzerinden ağ kaynaklarına HTTP istekleri göndermeyi kolaylaştıran bir arayüzdür. React uygulamalarında Fetch API kullanarak verilerimizi nasıl yöneteceğimizi öğrenmek, yazılımcılar için vazgeçilmez bir beceridir.

Fetch API Nedir?

Tanım

Fetch API, tarayıcıların bir ağ kaynağına asenkron olarak erişmelerini sağlayan modern bir JavaScript API'sidir. Fetch, XMLHttpRequest'e alternatif olarak kabul edilir ve daha basit ve okunabilir bir sözdizimine sahiptir.

Fetch API'nin Avantajları

Basitlik

Fetch API, sözdizimi bakımından oldukça basittir. İstek göndermek ve yanıt almak için yalnızca birkaç satır kod yazmanız yeterlidir.

Asenkron Yapı

Fetch API, asenkron bir yapıya sahiptir, bu da uygulamanızın mevcut işlemlerini engellemeden diğer görevleri de yerine getirebileceği anlamına gelir. Böylece kullanıcı deneyimi sıkıntı yaşamaz.

React ile Fetch API Kullanımı

React uygulamalarında Fetch API kullanmak oldukça yaygındır. İşte nasıl yapılacağı:

Bir API'ye Bağlanma

Adım 1: Proje Oluşturma

İlk olarak, yeni bir React projesi oluşturmalısınız. Eğer oluşturmadıysanız, aşağıdaki komutu kullanabilirsiniz:

1npx create-react-app fetch-example
2cd fetch-example
3npm start

Adım 2: Fetch API ile Veri Çekme

Leveraging the useEffect hook to fetch data when the component mounts is key in React:

1import React, { useEffect, useState } from 'react';
2
3function App() {
4    const [data, setData] = useState([]);
5    const [loading, setLoading] = useState(true);
6    const [error, setError] = useState(null);
7
8    useEffect(() => {
9        fetch('https://jsonplaceholder.typicode.com/posts')
10            .then((response) => {
11                if (!response.ok) {
12                    throw new Error('Ağ hatası');
13                }
14                return response.json();
15            })
16            .then((data) => {
17                setData(data);
18                setLoading(false);
19            })
20            .catch((error) => {
21                setError(error);
22                setLoading(false);
23            });
24    }, []);
25
26    if (loading) return <div>Yükleniyor...</div>;
27    if (error) return <div>Hata: {error.message}</div>;
28
29    return (
30        <ul>
31            {data.map((item) => (
32                <li key={item.id}>{item.title}</li>
33            ))}
34        </ul>
35    );
36}
37
38export default App;

Yukarıdaki örnek, JSONPlaceholder API’sinden veri çekiyor. fetch fonksiyonu ile API’ye istek gönderiyoruz, ardından gelen yanıtı işliyoruz.

Verilerin Gösterimi

Verilerin kullanıcı arayüzünde nasıl gösterileceğini ayarlamak, kullanıcı deneyimini artırmak açısından önemlidir.

Loading Durumu Yönetimi

Yüklenme sırasında kullanıcıya bir mesaj göstermek, uygulamanın sorunsuz bir şekilde çalışmasını sağlayacaktır. Yukarıdaki kodda, loading durumu kullanılarak bu yönetimi gerçekleştirdik.

Hata Yönetimi

Hata durumlarını yönetmek de çok önemli. catch bloğunda hatayı yakalayarak kullanıcıya uygun bir mesaj göstermek, kullanıcı deneyimini iyileştirir.

Sık Kullanılan Fetch API Yöntemleri

Fetch API ile çeşitli HTTP yöntemlerini kullanarak farklı senaryolar oluşturabilirsiniz.

GET Yöntemi

Veri çekmek için en yaygın kullanılan yöntemdir. Yukarıdaki örnekte bu yöntem kullanılmıştır. GET isteği, sunucudan veri almak ışında en basit ve en yaygın yöntemdir.

POST Yöntemi

Yeni veri oluşturmak için kullanılır:

1fetch('https://jsonplaceholder.typicode.com/posts', {
2    method: 'POST',
3    body: JSON.stringify({
4        title: 'Yeni Başlık',
5        body: 'Yeni içerik',
6        userId: 1,
7    }),
8    headers: {
9        'Content-Type': 'application/json',
10    },
11})
12.then(response => response.json())
13.then(data => console.log(data));

PUT ve DELETE Yöntemleri

• PUT: Mevcut bir veriyi güncellemek için kullanılır.
• DELETE: Belirtilen bir veriyi silmek için kullanılır.

1// PUT örneği
2fetch('https://jsonplaceholder.typicode.com/posts/1', {
3    method: 'PUT',
4    body: JSON.stringify({
5        id: 1,
6        title: 'Güncellenmiş Başlık',
7        body: 'Güncellenmiş içerik',
8        userId: 1,
9    }),
10    headers: {
11        'Content-Type': 'application/json',
12    },
13});
14
15// DELETE örneği
16fetch('https://jsonplaceholder.typicode.com/posts/1', {
17    method: 'DELETE',
18});

Örnek Proje: Basit Bir Todo Listesi

Kullanıcıların görevlerini takip edebileceği basit bir Todo uygulaması tasarlayarak Fetch API’yi pratik edebiliriz.

Proje Yapısı

Projemizin dizini şu şekilde olabilir:

1fetch-example/
2├── public/
3├── src/
4│   ├── App.js
5│   ├── index.js
6│   └── Todo.js
7└── package.json

API Entegrasyonu

Todo içeriği için bir API kullanarak, kullanıcıların ekledikleri görevleri listeleyebiliriz. API kullanarak görev ekleyebilir, ve bu görevleri listeleyebilirsiniz.

Performans İyileştirmeleri

Veri çekerken performansı artırmak için birkaç yöntemi göz önünde bulundurmakta fayda var.

CORS Problemleri

CORS (Cross-Origin Resource Sharing), tarayıcıların bir web sayfasının başka bir alan adından veri almasını sınırlayan bir güvenlik özelliğidir. CORS hatasının aşılması için uygun başlıkların ayarlanması gerekebilir.

Veri Cacheleme

Sık kullanılan verilerin cachelenmesi, uygulamanızın hızını artırabilir. Fetch işlemleri sırasında daha önce alınan verileri saklamak, yeniden istek göndermeyi azaltır.

Sonuç

Fetch API, React uygulamalarında verileri yönetmenin ve kullanıcı arayüzüne entegre etmenin etkili bir yoludur. Asenkron yapısı sayesinde kullanıcı deneyimi artar. Geliştiriciler için önemli bir araç olan Fetch API, modern web uygulamalarında sıklıkla kullanılır.

SSS (Sıkça Sorulan Sorular)

1. Fetch API nedir?
   
   • Fetch API, JavaScript ile ağ kaynaklarına asenkron olarak erişim sağlamanızı sağlayan bir arayüzdür.
2. React ile Fetch API nasıl kullanılır?
   
   • React uygulamalarında useEffect hook'unu kullanarak, bileşenin yüklenmesi sırasında verileri çekebilirsiniz.
3. Hata durumlarını nasıl yönetebilirim?
   
   • Fetch API istediği sırasında catch bloğuyla hataları ilgili bilgileri kullanıcıya gösterebilirsiniz.
4. CORS nedir ve nasıl çözülür?
   
   • CORS, bir web uygulamasının başka bir alan adından veri almasını kısıtlayan bir güvenlik mekanizmasıdır. Sunucu başlıklarıyla çözülmesi gerekir.
5. Fetch API ile hangi HTTP yöntemlerini kullanabilirim?
   
   • GET, POST, PUT ve DELETE gibi istekleri kullanarak veri alabilir, ekleyebilir, güncelleyebilir veya silebilirsiniz.