async/await

async/await ile fetch öğrenirsin.

async/await nedir?

async/await, Promise'leri daha okunaklı yazmanın yoludur. Bir işlevi async olarak işaretlersin; içinde await ile Promise'i beklersin. await Promise çözülene kadar işlevi durdurur; çözülünce değeri döndürür.

Örnek: async function loadUsers() { const response = await fetch(url); const data = await response.json(); }. Burada await fetch(url) isteği bekler ve yanıtı response'a atar. await response.json() JSON'a çevirmeyi bekler ve veriyi data'ya atar. Bu yazım, then zincirinden daha okunaklıdır; kod sıralı okunur. async işlevlerin kendisi de bir Promise döndürür. Hata yakalamak için try/catch bloğu kullanılır; bu, then zincirindeki .catch()'e karşılık gelir.

useEffect ile async

React bileşeninde veri yüklemek için useEffect kullanırsın. Ama useEffect'in kendisi async olamaz; çünkü useEffect bir işlev döndürmeli, Promise değil. Bu yüzden async işlevi useEffect içinde tanımlayıp çağırırsın.

Örnek: useEffect(() => { async function load() { const res = await fetch(url); } load(); }, []). Burada load işlevi async'tir; useEffect içinde çağrılır. useEffect'in kendisi load() çağrısını yapar; bu da bir Promise döndürür ama useEffect bunu umursamaz. Bu desen, React'te veri yüklemenin standart yoludur. Boş bağımlılık dizisi [] işlevin yalnızca bir kez çağrılmasını sağlar; bileşen ekrana gelince bir kez çalışır.

Uygulama async loadUsers yaz

Bir async function loadUsers yaz. İşlevin içinde await fetch("https://api.example.com/users") çağrısını const response'a ata. Sonra console.log(response.status) çağrısı yap. İşlevi dışa aktar (export gerekmez).

Örnek çözümü göster

async function loadUsers() {
  const response = await fetch("https://api.example.com/users");
  console.log(response.status);
}

Kendini test et

Kavramı rolüne eşle

async

İşlevi işaretler
await

Promise bekler
try/catch

Hata yakalar
fetch

İstek yapar
useEffect neden kendisi async olamaz?
```
useEffect(() => { /* ... */ }, []);
```
- Çünkü bir işlev döndürmeli, Promise değil
- Çünkü React izin vermez
- Çünkü bağımlılık dizisi gerekir
- Çünkü async işlevler yavaş çalışır
Cevabı göster

Çünkü bir işlev döndürmeli, Promise değil — useEffect bir temizlik işlevi döndürmeli, Promise değil.

await anahtar kelimesini yaz

const url = "api.example.com/users";
const response = ____ fetch(url);

Cevabı göster

const url = "api.example.com/users";
const response = await fetch(url);

Sıradaki ders: JSON parse

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler