React Native'de ağ iletişimi ve API'ları nasıl işlersiniz?

Question

Accepted Answer

React Native uygulamaları sıklıkla **API'ları** çağırır — yerleşik **fetch** (veya **axios**) kullanarak, async/await ile ve yanıtları, hataları ve yükleme durumlarını işleyerek. Ağ iletişimi web JavaScript'te olduğu gibi çalışır, genellikle önbelleğe almak için React Query ile birleştirilir. ## fetch ile istek yapma ```jsx // fetch is built-in (like the web); use async/await async function getUsers() { try { const response = await fetch('https://api.example.com/users'); if (!response.ok) throw new Error('Request failed'); // check status const data = await response.json(); // parse JSON return data; } catch (error) { console.error(error); // handle errors throw error; } } ``` `fetch` (yerleşik) HTTP istekleri yapar; `await response.json()` JSON'ı ayrıştırır; `response.ok` kontrol etmek ve try/catch hataları işler. `axios` popüler bir alternatiftir (interceptor'ler, daha güzel API). ## Yükleme/hata/veri durumlarını yönetme ```jsx function Users() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { getUsers().then(setData).catch(setError).finally(() => setLoading(false)); }, []); if (loading) return ; // loading spinner if (error) return Error; // error UI return ; // show data } ``` Uygulamalar iyi bir UX için **yükleme, hata ve veri** durumlarını işlemelidir (yükleme sırasında spinner, başarısızlık durumunda hata mesajı, başarı durumunda veri). ## React Query (sunucu verileri için önerilir) ```text → React Query / TanStack Query handles fetching + CACHING + loading/error states + refetching + sync automatically → much less boilerplate than manual useState/useEffect → Recommended for managing server data (vs hand-rolling every fetch) ``` ## Neden önemli React Native'de ağ iletişimi ve API'ları anlamak çok önemlidir çünkü **çoğu uygulama arka uçlarla iletişim kurar** — veri getirmek ve göndermek neredeyse evrensel bir ihtiyaçtır, bu nedenle pratik bilgisi olması zorunludur. Uygulamalar sürekli API çağrıları yapar (veri yükleme, form gönderme, kimlik doğrulama) ve React Native ağ iletişimi web JavaScript gibi çalışır (web geliştiricileri için bir avantaj). **İstek yapma** (yerleşik `fetch` veya `axios`, async/await ile, JSON ayrıştırma ve durum kodlarını kontrol etme) ve **hataları işleme** (try/catch, `response.ok` kontrol etme) temel beceridir çünkü ağ çağrıları temeldir ve sıkça başarısız olur. Önemle önemli olan **yükleme, hata ve veri durumlarını yönetme** bilgisini anlamaktır: getirme sırasında yükleme spinner'ı (ActivityIndicator) göstermek, başarısızlık durumunda hata mesajı ve başarı durumunda veri — bu durumları doğru şekilde işlemek, uygulamaları kırılmış görünmek yerine parlak görünmesini sağlar (yükleme sırasında boş ekran veya hata üzerinde kilitlenme kötü UX'dir). **React Query/TanStack Query** anlama giderek daha değerlidir: getirmeyi, **önbelleğe almayı**, yükleme/hata durumlarını, yeniden getirmeyi ve senkronizasyonu otomatik olarak işler, manuel olarak her getirmeyi useState/useEffect ile yönetmenin boilerplate'ini önemli ölçüde azaltır — ve modern React Native'de sunucu verileri için **önerilen yaklaşımdır**, sunucu verilerinin özel işleme yararlanacağının (önbelleğe alma, senkronizasyon) tanınmasını yansıtır. Çoğu React Native uygulaması API'larla iletişim kurduğundan (neredeyse evrensel bir ihtiyaç) ve bunu iyi yapmak (fetch/axios, hata işleme ve özellikle iyi UX için yükleme/hata/veri durumlarını yönetmek, idealik olarak önbelleğe alma için React Query ile) işlevsel, parlak uygulamalar için gereklidir, React Native'de ağ iletişimi ve API'ları anlamak yazılım geliştirmeye hızlıca uygulanabilen pratik bilgisidir — neredeyse veri getiren her gerçek uygulamada gerekli olan temel bir beceri, arka uç verilerini güvenilir ve pürüzsüz şekilde görüntüleyen uygulamalar oluşturmak için merkezi, React Query modern sunucu veri yönetimi için önerilen yaklaşım olması.