React Native
JSON parse
response.json() ile JSON parse öğrenirsin.
JSON parse nedir?
fetch'in döndürdüğü Response nesnesi ham yanıtı taşır; veriyi doğrudan vermez. Veriyi çıkarmak için response.json() metodunu çağırırsın. Bu metot yanıtı bir JSON olarak ayrıştırır ve JavaScript nesnesine çevirir.
Örnek: const data = await response.json();. Bu satır yanıtı bekler, JSON olarak ayrıştırır ve data'ya atar. data artık sıradan bir JavaScript nesnesidir; data.name gibi alanlara erişebilirsin. response.json() da bir Promise döndürür; bu yüzden await ile beklenmelidir. JSON, şunucular arası veri alışverişinin standart biçimidir; anahtar-değer çiftlerinden oluşur. Yanıt JSON değilse (HTML veya düz metin), response.text() kullanırsın. Doğru metodu yanıtı türüne göre seçmelisin.
JSON verisini kullanma
response.json() çağrısı bir JavaScript nesnesi döndürür. Bu nesnenin alanlarına nokta ile erişirsin: data.name, data.email. Eğer yanıt bir diziyse, data[0].name gibi indeks ile erişirsin.
Örnek API yanıtı: { id: 1, name: "Ayşe", email: "ayse@example.com" }. Bu nesnede data.name "Ayşe" verir. Eğer yanıt [{ id: 1, name: "Ayşe" }, { id: 2, name: "Alex" }] gibi bir dizi ise data.length 2 verir, data[0].name "Ayşe" verir. React'te bu veriyi state'e koyup bileşende gösterebilirsin. Veriyi render etmeden önce varlığını kontrol etmek önemlidir; aksi halde ilk render'da undefined hatası alırsın.
Uygulama JSON yanıtı ayrıştır
Bir async function loadUser yaz. await fetch("https://api.example.com/users/1") çağrısını const response'a ata. await response.json() çağrısını const data'ya ata. console.log(data.name) çağrısı yap.
Örnek çözümü göster
async function loadUser() {
const response = await fetch("https://api.example.com/users/1");
const data = await response.json();
console.log(data.name);
}
Kendini test et
-
response.json() ne döndürür?
const data = await response.json();
- String
- Number
- Promise
- Boolean
Cevabı göster
Promise — response.json() bir Promise döndürür; bu yüzden await ile beklenir.
-
response.json() çağrısını yaz
const data = await ____;
Cevabı göster
const data = await response.json();
-
Kavramı rolüne eşle
- response.json()
- JSON ayrıştırır
- data.name
- Alan erişimi
- await
- Promise bekler
- Response
- Ham yanıt
Sıradaki ders: Error handling
