Özet - API ve fetch
- React Native kursu
- Orta seviye
- Ders 41/116
- 5 dk
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.
Başlangıç kodu
// useState ve Text, View'i içe aktar
function UserViewer() {
// user, loading ve errors state'ini başlat
return null;
}Örnek çözüm
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.
Başlangıç kodu
// useState, useEffect ve Text, View'i içe aktar
function UserViewer() {
// user, loading, error state'ini başlat
// useEffect içinde async load işlevi tanımla ve çağır
return null;
}Örnek çözüm
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;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kullanıcı görüntüleyicide veri ne zaman yüklenir?
useEffect(() => { /* ... */ }, []);- Bileşen ekrana gelince bir kez Doğru cevap
- Yalnızca butona basınca
- Her render'da
- Hiçbir zaman
Açıklama: Boş bağımlılık dizisi ile useEffect bileşen ekrana gelince bir kez çalışır.
2 JSON ayrıştırma çağrısını yaz
const data = await ____;const data = await response.json();Açıklama: response.json() yanıtı ayrıştırır.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
fetch |
İstek yapar |
await |
Promise bekler |
response.json() |
JSON ayrıştırır |
try/catch |
Hata yakalar |