Bağlanırken Veri Getirme
useEffect içinde bir API'den JSON getirin, yanıtı durumda saklayın ve boş bağımlılık dizisiyle getirme işlemini yalnızca bir kez tetikleyin.
Bağlanırken Veri Getirme, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Veri alma deseni
Standart React veri alma deseni: 1) yükleniyor/hata/veri durumunu tanımlayın, 2) boş bağımlılık dizisi [] ile useEffect içinde veri alın, 3) geri çağırma işlevinde durumu güncelleyin, 4) duruma göre arayüzü oluşturun.
Tam örnek
Bağlandıktan sonra kullanıcıları alan, yüklenme ve hata yönetimi içeren eksiksiz bir örnek.
interface User { id: number; name: string; email: string; }
function UserList() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => setUsers(data))
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <Spinner />;
if (error) return <ErrorMessage message={error} />;
return <ul>{users.map(u => <UserItem key={u.id} {...u} />)}</ul>;
}useEffect içinde async/await kullanma
useEffect'in geri çağırma işlevi doğrudan async olamaz; aksi durumda bir Promise döndürür ve React bunu temizleme işlevi olarak yorumlar. Bunun yerine içte bir async işlevi tanımlayın ve hemen çağırın.
useEffect(() => {
async function fetchUsers() {
try {
const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
setUsers(data);
} catch (err) {
setError((err as Error).message);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);Yanıt durumunu kontrol etme
fetch, HTTP hatalarında (4xx, 5xx) hata fırlatmaz; yalnızca ağ hatalarında fırlatır. Her zaman response.ok değerini kontrol edin ve hata yanıtları için hatayı kendiniz fırlatın.
const res = await fetch('/api/data');
if (!res.ok) {
// Could also use res.status for specific handling
throw new Error(`Server responded ${res.status}: ${res.statusText}`);
}
const data = await res.json();Bağımlılık değiştiğinde veri alma
Yol parametrelerinden veya özelliklerden gelen bir ID gibi bağımlılığı, etkinin bağımlılık dizisine ekleyin. Bağımlılık her değiştiğinde etki yeniden çalışır ve güncel verileri alır.
const { userId } = useParams();
useEffect(() => {
if (!userId) return;
setLoading(true);
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(setUser)
.finally(() => setLoading(false));
}, [userId]);Etkilerde POST istekleri
Etkiler POST/PUT/DELETE istekleri de gönderebilir; ancak bunlar genellikle bağlanma sırasında çalışan etkilerle değil, olaylarla (form gönderme, düğmeye tıklama) tetiklenir. Etkileri veri yükleme için, olay işleyicilerini ise değişiklik işlemleri için kullanın.
Özel useFetch kancası
Yeniden kullanabilmek için veri alma + yüklenme + hata desenini özel bir kancaya ayırın.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json(); })
.then(setData)
.catch(e => setError(e.message))
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}JSON'ı güvenle ayrıştırma
res.json() çağrısını her zaman try/catch içine alın; hatalı JSON bir SyntaxError fırlatır. Dış catch bunu ele alır, ancak kaynağı bilmek hata ayıklamaya yardımcı olur.
API temel URL'sini yapılandırma
API URL'lerini sabit olarak kodlamayın. Temel URL için ortam değişkenlerini (import.meta.env.VITE_API_URL) kullanın. Yapılandırılmış bir veri alma sarmalayıcısı içeren merkezi bir api.ts dosyası oluşturun.
const API_BASE = import.meta.env.VITE_API_URL;
async function apiFetch<T>(path: string): Promise<T> {
const res = await fetch(`${API_BASE}${path}`, {
headers: { 'Authorization': `Bearer ${getToken()}` }
});
if (!res.ok) throw new Error(`API error ${res.status}`);
return res.json();
}React Query'ye ne zaman geçilmeli
Elle uygulanan veri alma desenleri basit durumlarda işe yarar. Önbelleğe alma, arka planda yeniden veri alma, sayfalama veya değişiklik işlemlerine ihtiyaç duyduğunuzda React Query'ye (TanStack Query) geçin; bu desenlerin tümünü güvenilir biçimde yönetir.
Yüklenme iskeleti gösterme
Döndürücü yerine, yüklenen içeriğin biçimine uyan bir iskelet arayüzü gösterin. Bu, algılanan yüklenme süresini azaltır ve düzen kaymasını önler.
Kısa kontrol
Bir useEffect geri çağırma işlevini neden doğrudan async yapamazsınız?
Özet: useEffect içinde veri alma
Yükleniyor/hata/veri durumunu tanımlayın. Boş bağımlılık dizisi [] ile useEffect içinde veri alın. İçte bir async işlevi tanımlayın; geri çağırma işlevini async yapmayın. Her zaman res.ok değerini kontrol edin. Dinamik veri alma için URL'yi veya ID'yi bağımlılıklara ekleyin. Yeniden kullanmak için özel bir useFetch kancasına ayırın. Üretim ortamında veri almak için TanStack Query'yi değerlendirin.
Sıkça Sorulan Sorular
“Bağlanırken Veri Getirme” dersi ücretsiz mi?
Evet — “Bağlanırken Veri Getirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Bağlanırken Veri Getirme” dersinde ne öğreneceğim?
useEffect içinde bir API'den JSON getirin, yanıtı durumda saklayın ve boş bağımlılık dizisiyle getirme işlemini yalnızca bir kez tetikleyin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Bağlanırken Veri Getirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- useEffect Temelleri: Bağımlılıklar ve Temizleme
- Bağlanırken Veri Getirme
- Yüklenme ve Hata Durumlarını Yönetme
- Temizleme için AbortController