Offline cache

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.

Örnek çözümü göster

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
}

Kendini test et

Önbellek okuma işlevini yaz

const cached = await AsyncStorage.____('user_data');

Cevabı göster

const cached = await AsyncStorage.getItem('user_data');

AsyncStorage'a nesne yazarken ne kullanılır?
```
await AsyncStorage.setItem('key', ???(data))
```
- JSON.parse
- toString
- JSON.stringify
- String
Cevabı göster

JSON.stringify — JSON.stringify nesneyi dizeye çevirir.
Adımı amacına eşle

getItem

Önbellek okur
setItem

Önbelleğe yazar
JSON.stringify

Dizeye çevirir
JSON.parse

Nesneye çevirir

Sıradaki ders: Sync

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler