JavaScript async/await ve Promise Nedir?

Asenkron programlama JavaScript'in en can alici konusu. Closure ve hoisting ne kadar kafa karistiriyorsa, async/await da o kadar. Mulakatlarda "asenkron" denince 4-5 farkli soru gelir: callback hell, Promise, async/await, event loop, microtask queue. Bu yazida hepsini toparliyoruz.

Once yalin ifadeyle: JavaScript tek is parcacikli (single-threaded) calisir. Yani bir anda sadece tek sey yapabilir. Peki tarayicimiz nasil yuzlerce seyi ayni anda yapiyor? Cevap: asenkron programlama. Fonksiyonu cagir, "bitince haber ver" de, arada baska is yap. Iste async/await ve Promise bu "haber ver" mekanizmasini duzgun bir sekilde yazmamizi saglar.

Asenkron JavaScript 3 evreden gecti. Hepsini gormek lazim — mulakatlarda "callback hell nedir" diye sorarlar.

// Kullanici getir, sonra o kullanicinin postlarini getir
getUser(userId, function(user) {
  getPosts(user.id, function(posts) {
    renderUI(user, posts);
  });
});

// 3-4 ic ice callback → "callback hell" (kayisifa kroniklesmesi)
// Kod okunamaz, hata yonetimi zor (her callback icin ayri try/catch)

// Ayni is — Promise zinciri
getUser(userId)
  .then(user => getPosts(user.id))
  .then(posts => renderUI(user, posts))
  .catch(err => console.error(err));

// Daha iyi: zincir dikey, tek catch

// Ayni is — async/await ile senkron gibi yazilir
async function kullaniciGoster(userId) {
  try {
    const user = await getUser(userId);
    const posts = await getPosts(user.id);
    renderUI(user, posts);
  } catch (err) {
    console.error(err);
  }
}

kullaniciGoster(42);

Iki kelime oyunu: async ve await. Birlikte calisirlar.

// async: fonksiyonu "asenkron" olarak isaretle
// Her async fonksiyon bir Promise doner
async function selamVer(isim) {
  return "Merhaba " + isim;
}

// Kullanim: iki yol var
selamVer("Ali").then(mesaj => console.log(mesaj));  // Promise gibi
const mesaj = await selamVer("Ali");                   // await ile
console.log(mesaj);  // "Merhaba Ali"

// await: Promise'in bitmesini bekle
// SADECE async fonksiyon icinde calisir
async function kullanicininPostlari(userId) {
  const user = await getUser(userId);        // once user gelsin
  const posts = await getPosts(user.id);     // sonra posts
  return { user, posts };
}

// await olmadan:
function kullanicininPostlari(userId) {
  return getUser(userId)
    .then(user => getPosts(user.id).then(posts => ({ user, posts })));
}

async/await'in en buyuk avantaji: klasik try/catch ile hata yakalama. Promise'lerdeki .catch() zincirinden daha temiz.

// DOGRU — async/await + try/catch
async function kullanicininVerileri(userId) {
  try {
    const user = await getUser(userId);
    const posts = await getPosts(user.id);
    return { user, posts, hata: null };
  } catch (err) {
    console.error("API hatasi:", err);
    return { user: null, posts: [], hata: err.message };
  }
}

// BIRDEN FAZLA await — bir hata tum zinciri durdurur
async function a() { await getA(); }
async function b() { await getB(); }
async function hepsi() {
  try {
    const aData = await a();
    const bData = await b();  // a() hata verirse b() calismaz
  } catch (err) {
    // a() veya b() hatasi buraya dusuyor
  }
}

// COZUM: Promise.allSettled — hepsini bekle, hatta varsa devam et
async function hepsiBagimsiz() {
  const sonuclar = await Promise.allSettled([a(), b()]);
  // [fulfilled, rejected] veya [fulfilled, fulfilled] gibi doner
  // Hata olsa bile hepsi beklenir
}

3 API cagiracaksin. Nasil yazarsin?

// YANLIS — sirali, yavas (1sn + 1sn + 1sn = 3sn)
const a = await apiA();  // 1sn
const b = await apiB();  // 1sn (a bittikten sonra)
const c = await apiC();  // 1sn (b bittikten sonra)

// DOGRU — paralel, hizli (max(1,1,1) = 1sn)
const [a, b, c] = await Promise.all([apiA(), apiB(), apiC()]);

// Promise.all hepsini ayni anda baslatir, hepsinin bitmesini bekler
// Bir hata olursa tum zincir durur (reject)

Bu JavaScript mulakatinin en klasik tuzagi. Sadece oku, sonra calistir:

console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

console.log("4");

// Cikti: 1, 4, 3, 2 — neden?

Neden 1, 4, 3, 2?

1. console.log("1") senkron → ekrana 1
2. setTimeout macrotask kuyruguna eklenir (en sona kalir)
3. Promise.then microtask kuyruguna eklenir
4. console.log("4") senkron → ekrana 4
5. Call stack bosalinca: once microtask (3), sonra macrotask (2)