⏳ Async / Await

⏳ Async / Await

JavaScript’in “Bekle Bi’ Dakka” Demesinin Bilimi

Neden await koymayı unutunca her şey yanıyor? 🔥

JavaScript’te asenkron kod yazmak şuna benzer:

Aynı anda yemek yapmaya çalışırsın,
çay demlenirken kapı çalar,
telefon çalar,
biri “wifi gitti” diye bağırır…

JavaScript de tam olarak böyle çalışır.
Ve async / await, bu kaosun içindeki trafik polisi gibidir 🚦


🧠 1️⃣ JavaScript’in Karakter Analizi (Önemli!)

Önce JS’i tanıyalım, çünkü sorun kodda değil…
karakterde.

JavaScript:

  • 🧵 Single-threaded (tek iş yapar)
  • Hızlıdır
  • 😤 Beklemeyi sevmez
  • 🧠 “Bunu sonra hallederiz” kafasında

Yani JS şunu sever:

console.log("1");
console.log("2");
console.log("3");

📤 Çıktı:

1
2
3

Huzur. Zen. Minimalizm. 🧘‍♂️


💥 2️⃣ Asenkron Kod Girince Ortalık Neden Karışıyor?

Şimdi sahneye asenkron bir iş atalım:

console.log("Başladı");

setTimeout(() => {
  console.log("Bitti");
}, 2000);

console.log("Devam ediyor");

📤 Çıktı:

Başladı
Devam ediyor
Bitti

😲 “Ama 2 saniye beklemesi gerekmiyor muydu?”

JavaScript’in cevabı net:

“Ben beklemem.
Bekleyecek olan sensin.”

📌 Çünkü:

  • setTimeoutasenkron
  • JS → bloklanmak istemiyor
  • Bekleme işini Web API’lere atıyor

🧩 3️⃣ Promise Nedir? (JavaScript’in “Söz Veriyorum”u)

Promise şu demektir:

“Şu an yok…
Ama olacak, söz.”

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Veri geldi 🎉");
  }, 2000);
});

📌 Promise’in 3 hali vardır:

DurumAnlamı
pendingBekleniyor ⏳
fulfilledOldu bu iş ✅
rejectedGeçmiş olsun ❌

Ama kritik nokta şu:

Promise sonuç değildir
Promise = sonucun geleceğine dair belge


😈 4️⃣ Asıl Felaket: await Yazmayı Unutmak

Klasik hata:

async function getData() {
  const data = fetch("https://api.example.com/data");
  console.log(data);
}

getData();

📤 Çıktı:

Promise { <pending> }

🔥🔥🔥
“DATA NEREDE?”

JavaScript sakin:

“Ben sana data değil,
data geleceğine dair belge verdim.”


🧠 5️⃣ await Ne Yapar? (Hayat Kurtaran Satır)

await demek şudur:

“Dur.
Bu Promise bitsin.
Sonra devam et.”

Doğru kullanım:

async function getData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

📌 Adım adım ne oldu?

1️⃣ fetch başladı
2️⃣ await → JS burada durdu
3️⃣ Promise çözüldü
4️⃣ Gerçek veri geldi
5️⃣ Console: 🎉


🧪 6️⃣ Mini Deney: await Olmazsa vs Olursa

❌ await yok

async function example() {
  const result = Promise.resolve(42);
  console.log(result);
}

📤 Çıktı:

Promise { 42 }

✅ await var

async function example() {
  const result = await Promise.resolve(42);
  console.log(result);
}

📤 Çıktı:

42

🎯 Kısa özet:

  • await yok → söz
  • await var → gerçek

🤯 7️⃣ “Her Şey Neden Yanıyor?” Sorusu

Şu senaryo çok tanıdık:

const user = await getUser();
console.log(user.name);

Ama await unutulursa:

const user = getUser();
console.log(user.name);

📤 Sonuç:

TypeError: Cannot read property 'name'

🔥🔥🔥

📌 Çünkü:

  • user = Promise
  • Promise’in name’i yok

JavaScript burada diyor ki:

“Bana Promise verdin,
ben de Promise gibi davrandım.”


⚠️ 8️⃣ Async / Await ile En Sık Yapılan Hatalar

❌ async yazmadan await kullanmak

function test() {
  await fetch(url); // ❌
}

❌ Promise dönen fonksiyonu normal değer sanmak

❌ map içinde await kullanmak

items.map(async item => {
  await doSomething(item);
});

📌 Bu beklemez!


🚀 9️⃣ Async map Tuzağından Kurtulma

❌ Yanlış

items.map(async item => {
  await process(item);
});

✅ Doğru

await Promise.all(
  items.map(item => process(item))
);

📌 Promise.all:

  • Hepsini başlatır
  • Hepsini bekler
  • Sonra devam eder

🎯 Performans + kontrol = ❤️


🛡️ 🔟 try / catch Olmadan Async Yazma

Async kod = hata ihtimali.

async function loadData() {
  try {
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.error("Bir şeyler yandı 🔥", error);
  }
}

📌 try/catch = yangın söndürücü 🧯
📌 Async yazıp try/catch koymamak = benzinle mangal yakmak


🧠 1️⃣1️⃣ Altın Kurallar (Gerçek Hayat İpuçları)

✅ Promise dönen her şeye şüpheyle yaklaş
✅ Sonuç istiyorsan await
✅ Paralel işler → Promise.all
✅ Okunabilirlik > kısa kod
✅ Debug yaparken console.log(await value)


🏁 SON SÖZ: JavaScript Sana Ne Diyor?

JavaScript diyor ki:

“Ben hızlıyım.
Ama sen bana beklemeyi öğretmezsen,
ben durmam.”

Ve unutma:

await yazmayı unutursan
Kod çalışır…
Ama mantık çalışmaz 😏

Comments

No comments yet. Why don’t you start the discussion?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir