async/await
- React Native kursu
- Orta seviye
- Ders 38/116
- 5 dk
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).
Başlangıç kodu
// async function loadUsers yaz
// içine await fetch çağrısı koy
// yanıt durum kodunu konsola yazÖrnek çözüm
async function loadUsers() {
const response = await fetch("https://api.example.com/users");
console.log(response.status);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
async |
İşlevi işaretler |
await |
Promise bekler |
try/catch |
Hata yakalar |
fetch |
İstek yapar |
2 useEffect neden kendisi async olamaz?
useEffect(() => { /* ... */ }, []);- Çünkü bir işlev döndürmeli, Promise değil Doğru cevap
- Çünkü React izin vermez
- Çünkü bağımlılık dizisi gerekir
- Çünkü async işlevler yavaş çalışır
Açıklama: useEffect bir temizlik işlevi döndürmeli, Promise değil.
3 await anahtar kelimesini yaz
const url = "api.example.com/users";
const response = ____ fetch(url);const url = "api.example.com/users";
const response = await fetch(url);Açıklama: await Promise çözülmesini bekler.