Soruları yükleme

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.

Örnek çözümü göster

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.

Kendini test et

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
- Çünkü daha kısa olur
Cevabı göster

Çünkü fetch bir Promise döndürür, await ile beklenmelidir — fetch bir Promise döndürür; await için async gerekir.

Yüklenen veriyi döndür

async function loadQuestions() {
  const response = await fetch(url);
  const data = await response.json();
  ____;
}

Cevabı göster

async function loadQuestions() {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

Kavramı rolüne eşle

fetch

İstek yapar
response.json()

JSON ayrıştırır
await

Promise bekler
return data

Veriyi döndürür

Sıradaki ders: Quiz oynatma

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler