Offline cache
- React Native kursu
- İleri seviye
- Ders 32/83
- 5 dk
Offline cache stratejisini öğrenirsin.
Çevrimdışı önbellek
Çevrimdışı önbellek, ağdan gelen veriyi yerel depoda tutar; kullanıcı çevrimdışı olduğunda bu veriyi gösterir. AsyncStorage ile veriyi anahtar-değer olarak saklarsın; ağ isteği başarılı olunca veriyi hem ekrana gösterir hem de önbelleğe yazarsın.
Akış şöyledir: önce önbelleği okursun (hızlı görüntü), sonra ağ isteği yaparsın. Ağ başarılı olunca yeni veriyi önbelleğe yazıp ekrana güncellersin; ağ başarısız olunca önbellekteki eski veriyi göstermeye devam edersin. Bu kalıp, kullanıcının her durumda bir içerik görmesini sağlar. Önbellek bir yaşam süresi (TTL) ile de sınırlanabilir; çok eski veri yeniden yüklenir.
Önbellek akışı
Bir çevrimdışı önbellek akışı şu adımlardan oluşur: önce önbellekten veriyi oku, hemen ekrana göster. Sonra ağ isteğini dene; başarılı olursa yeni veriyi hem önbelleğe yaz hem ekrana güncelle. Ağ başarısız olursa önbellekteki veriyi koru.
Bu akış, 'stale-while-revalidate' olarak da bilinir; kullanıcı önce eski veriyi görür, sonra yeni veri gelirse güncellenir. AsyncStorage'a yazarken değer bir dize olmalıdır; nesne saklamak için JSON.stringify ile dizeye çevirirsin. Okurken de JSON.parse ile nesneye geri çevirirsin. Bu dönüştürme önbellek akışının temelidir.
Uygulama Önbellek akışını yaz
fetchWithCache işlevini tamamla. Önce const cached = await AsyncStorage.getItem('user_data') ile önbelleği oku. if (cached) setData(JSON.parse(cached)) ile ekrana yaz. Sonra const fresh = await fetchUser() ile ağı dene. Başarılı olursa await AsyncStorage.setItem('user_data', JSON.stringify(fresh)) ile önbelleğe yaz ve setData(fresh) ile güncelle. fetchUser ve setData parametre olarak verilir.
Başlangıç kodu
import AsyncStorage from '@react-native-async-storage/async-storage';
export async function fetchWithCache(fetchUser, setData) {
// önbelleği oku, ağ isteği yap, önbelleği güncelle
}Örnek çözüm
const cached = await AsyncStorage.getItem('user_data');
if (cached) setData(JSON.parse(cached));
try {
const fresh = await fetchUser();
await AsyncStorage.setItem('user_data', JSON.stringify(fresh));
setData(fresh);
} catch (e) {
// ağ hatası; önbellek korunur
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Önbellek okuma işlevini yaz
const cached = await AsyncStorage.____('user_data');const cached = await AsyncStorage.getItem('user_data');Açıklama: getItem önbellekten değer okur.
2 AsyncStorage'a nesne yazarken ne kullanılır?
await AsyncStorage.setItem('key', ???(data))- JSON.parse
- toString
- JSON.stringify Doğru cevap
- String
Açıklama: JSON.stringify nesneyi dizeye çevirir.
3 Adımı amacına eşle
| Kavram | Anlamı |
|---|---|
getItem |
Önbellek okur |
setItem |
Önbelleğe yazar |
JSON.stringify |
Dizeye çevirir |
JSON.parse |
Nesneye çevirir |