React Native
Özet - API ve fetch
fetch, async/await ve error handling'i birleştirerek bir kullanıcı görüntüleyici yazarsın.
Özet - API ve fetch
Bu grupta fetch, GET, async/await, JSON parse ve hata yakalamayı öğrendin. fetch bir URL alır, HTTP isteği yapar ve bir Promise döndürür. GET, fetch'in varsayılan yöntemidir.
async/await ile then zincirini sadeleştirirsin; useEffect içinde async işlev tanımlayıp çağırırsın. response.json() yanıtı ayrıştırır ve JavaScript nesnesine çevirir. Hataları try/catch ile yakalarsın; HTTP hataları için response.ok kontrol edersin. Şimdi tüm bunları birleştirip çalışan bir kullanıcı görüntüleyici yazacaksın. Bileşen ekrana gelince bir API çağrısı yapacak, gelen veriyi state'e koyacak ve ekranda gösterecek. Hata olursa kullanıcıya mesaj gösterecek.
Uygulama Kullanıcı state'ini yaz
Bir UserViewer bileşeni yaz. useState ile user state'ini null, loading state'ini true, error state'ini null olarak başlat.
Örnek çözümü göster
import { useState } from "react";
import { Text, View } from "react-native";
function UserViewer() {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
return null;
}
Uygulama Veri yükleme ekle
Bir UserViewer bileşeni yaz. useState ile user, loading, error state'ini başlat. useEffect içinde async function load tanımla. load işlevi: await fetch("https://api.example.com/users/1") çağrısını const response'a ata, await response.json()'u const data'ya ata, setUser(data) yap. catch (error) bloğunda setError(error.message). Son olarak setLoading(false). Boş bağımlılık dizisi [] kullan.
Örnek çözümü göster
import { useEffect, useState } from "react";
import { Text, View } from "react-native";
function UserViewer() {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function load() {
try {
const response = await fetch("https://api.example.com/users/1");
const data = await response.json();
setUser(data);
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
}
load();
}, []);
return null;
}
Kendini test et
-
Kullanıcı görüntüleyicide veri ne zaman yüklenir?
useEffect(() => { /* ... */ }, []);
- Bileşen ekrana gelince bir kez
- Yalnızca butona basınca
- Her render'da
- Hiçbir zaman
Cevabı göster
Bileşen ekrana gelince bir kez — Boş bağımlılık dizisi ile useEffect bileşen ekrana gelince bir kez çalışır.
-
JSON ayrıştırma çağrısını yaz
const data = await ____;
Cevabı göster
const data = await response.json();
-
Kavramı rolüne eşle
- fetch
- İstek yapar
- await
- Promise bekler
- response.json()
- JSON ayrıştırır
- try/catch
- Hata yakalar
Sıradaki ders: Quiz modeli
