JavaScript: Başlangıçtan İleri Seviyeye
Bölüm 18 / 312 dk okuma

async / await

Asenkron kodu senkronmuş gibi yazmanın yolu.

async/await, Promise'lerin üzerine yazılmış sözdizimi şekeridir. Aynı şeyi yaparlar ama çok daha okunaklıdır.

Temel kullanım

async function getUser(id) {
  const res = await fetch(`/api/users/${id}`);
  const user = await res.json();
  return user;
}
 
getUser(42).then((u) => console.log(u));
  • async ile işaretli her fonksiyon otomatik bir Promise döner.
  • await sadece async içinde kullanılır.
  • await xx.then(value => ...) ile aynı, sadece daha okunaklı.

Top-level await

ES Module'lerde fonksiyon olmadan da kullanılabilir:

// module.mjs
const data = await fetch("/api").then((r) => r.json());
console.log(data);

CommonJS'te kullanılamaz.

Hata yönetimi: try/catch

async function getUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error("Kullanıcı alınamadı:", err);
    return null;
  }
}

fetch HTTP 500'de bile reject olmaz. Sadece ağ hatası olursa reject. Bu yüzden res.ok kontrolünü manuel yapmak gerekir.

Paralel vs sıralı

Sıralı — çoğunlukla istemediğin şey

const user = await getUser(id);
const orders = await getOrders(id);
// 2 kez bekledin (toplam = user süresi + orders süresi)

Paralel — birbirine bağlı değilse

const [user, orders] = await Promise.all([
  getUser(id),
  getOrders(id),
]);
// Toplam = en uzunu

Performans açısından kritik fark.

Döngülerde async

// ❌ yanlış: forEach async'i beklemez
items.forEach(async (item) => {
  await process(item); // herkes paralel başlar, başarımı kontrol edemezsin
});
 
// ✅ for...of: sıralı
for (const item of items) {
  await process(item);
}
 
// ✅ Promise.all: paralel + bekle
await Promise.all(items.map((item) => process(item)));

Bir async fonksiyon her zaman Promise döner

async function f() { return 42; }
 
f();           // Promise<42>
await f();     // 42
f().then((v) => console.log(v)); // 42

return değer otomatik resolve, throw otomatik reject olur.

Sık yapılan hata: await unutmak

async function save() {
  // ❌ döndürmeyi unutma
  fetch("/api/save", { method: "POST" });
}
 
// "save" hemen döner, fetch arka planda devam eder, hatayı yakalayamazsın
async function save() {
  await fetch("/api/save", { method: "POST" });
}
💡Pratik

Yeni kod yazarken: önce async koy, içinde await'lerle düz mantık akışını yaz. Promise zinciri (then.then.then) sadece çok kısa durumlarda kullan — onun dışında async/await daha temiz.

Bu bölümü bitirdin mi?

İlerlemen tarayıcıda saklanır, eğitim listesinde görünür.

Paylaş