Soruları yükleme
- React Native kursu
- Orta seviye
- Ders 43/116
- 6 dk
fetch ile soruları yükleme öğrenirsin.
Soruları yükleme
Bu derste soruları bir API'den yükleyen bir işlev yazacaksın. Bir async function loadQuestions tanımlarsın; içine await fetch ve await response.json() koyarsın. Bu işlev bir Promise döndürür; çözüldüğünde soru dizisini verir.
Önceki dersteki questions sabiti yerel bir yedektir; gerçek uygulamada veri sunucudan gelir. Ama geliştirme sırasında her ikisini de tutmak yaygındır: API çalışmıyorsa yedek sabit kullanılır. Bu ders, fetch ve response.json()'u öğrendiğin önceki ünitelerin üzerine kuruludur. Yapacağın şey: async function loadQuestions() { const response = await fetch(url); const data = await response.json(); return data; }.
Uygulama loadQuestions yaz
Önceki dersteki questions sabiti zaten tanımlı (aşağıdaki başlangıç kodunda). Şimdi bir async function loadQuestions ekle. await fetch("https://api.example.com/questions") çağrısını const response'a ata. await response.json()'u const data'ya ata. return data ile veriyi döndür.
Başlangıç kodu
const questions = [
{ id: 1, question: "Türkiye'nin başkenti?", options: ["İstanbul", "Ankara", "İzmir"], answer: 1 },
{ id: 2, question: "2 + 2 kaçtır?", options: ["3", "4", "5"], answer: 1 }
];
// async function loadQuestions yaz
// fetch ile response al
// yanıtı ayrıştır
// veriyi döndürÖrnek çözüm
const questions = [
{ id: 1, question: "Türkiye'nin başkenti?", options: ["İstanbul", "Ankara", "İzmir"], answer: 1 },
{ id: 2, question: "2 + 2 kaçtır?", options: ["3", "4", "5"], answer: 1 }
];
async function loadQuestions() {
const response = await fetch("https://api.example.com/questions");
const data = await response.json();
return data;
}API ve yedek veri
Gerçek uygulamalarda API bazen çalışmaz. Bu yüzden bir yedek (fallback) veri tutmak yaygındır. loadQuestions çağrısı başarısız olursa catch bloğunda yedek questions sabitini döndürürsün.
Bu yaklaşım, uygulamanın her durumda çalışmasını sağlar. Kullanıcıya hata göstermek yerine yedek veriyle devam edersin. Sonraki derslerde bu işlevi bir Quiz bileşeninin içinden çağıracağız; bileşen ekrana gelince sorular yüklenecek. Yükleme akışı, veri yönetiminin temel parçasıdır; bu derste attığımız temel üstüne quiz akışını kuracağız.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 loadQuestions neden async olmalı?
function loadQuestions() { /* ... */ }- Çünkü hızlı çalışır
- Çünkü React zorunlu kılar
- Çünkü fetch bir Promise döndürür, await ile beklenmelidir Doğru cevap
- Çünkü daha kısa olur
Açıklama: fetch bir Promise döndürür; await için async gerekir.
2 Yüklenen veriyi döndür
async function loadQuestions() {
const response = await fetch(url);
const data = await response.json();
____;
}async function loadQuestions() {
const response = await fetch(url);
const data = await response.json();
return data;
}Açıklama: return data ile yüklenen veriyi döndürürsün.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
fetch |
İstek yapar |
response.json() |
JSON ayrıştırır |
await |
Promise bekler |
return data |
Veriyi döndürür |