Async/Await vs Promise.then() — Hansını Seçməli?

Async/Await vs Promise.then() — Hansını Seçməli?

Salam, developer dostlar! 👋

Bakıda frontend və ya backend müsahibəyə gedən hər kəs bu sualla qarşılaşıb: "Promise.then() ilə async/await arasında fərq nədir, hansını istifadə edirsən?" Kapital Bank-ın fintech komandasında olsun, Azerconnect-in backend departamentində olsun, yaxud Technest-in startup mühitində olsun — bu sual qaçılmazdır.

Bu gün mövzunu bir dəfəlik, praktiki şəkildə bağlayırıq. Nəzəriyyə ilə yox, real kod ilə.

---

Promise.then() — Klassik Yanaşma

Promise JavaScript-ə ES6 (2015) ilə gəldi və asinxron proqramlaşdırmanı callback hell-dən xilas etdi. .then() zənciri ilə ardıcıl əməliyyatları idarə edirik:

javascriptKopyala
// Məsələn: İstifadəçi məlumatını çəkib, sonra sifarişlərini yükləyirik
function getUserOrders(userId) {
  return fetch(`/api/users/${userId}`)
    .then(response => response.json())
    .then(user => {
      console.log(`Salam, ${user.name}`);
      return fetch(`/api/orders?userId=${user.id}`);
    })
    .then(response => response.json())
    .then(orders => {
      console.log(`${orders.length} sifariş tapıldı`);
      return orders;
    })
    .catch(error => {
      console.error('Xəta baş verdi:', error.message);
    });
}

Üstünlükləri:

• Hər .then() aydın bir addımdır
• .catch() ilə mərkəzləşdirilmiş error handling
• Köhnə layihələrdə (legacy code) hər yerdə var

Çatışmazlıqları:

• 3-4 .then()-dən sonra oxunaqlılıq azalır
• Dəyişənləri aralıq addımlar arasında ötürmək çətindir
• Debugging zamanı stack trace qarışıq olur

---

Async/Await — Müasir Standart

ES2017 ilə gələn async/await, Promise-in üzərində syntactic sugar-dır. Eyni işi görür, amma sinxron kod kimi oxunur:

javascriptKopyala
// Eyni məntiq, amma async/await ilə
async function getUserOrders(userId) {
  try {
    const userResponse = await fetch(`/api/users/${userId}`);
    const user = await userResponse.json();
    
    console.log(`Salam, ${user.name}`);
    
    const ordersResponse = await fetch(`/api/orders?userId=${user.id}`);
    const orders = await ordersResponse.json();
    
    console.log(`${orders.length} sifariş tapıldı`);
    return orders;
  } catch (error) {
    console.error('Xəta baş verdi:', error.message);
  }
}

Fərqi görürsünüz? Kod yuxarıdan aşağı axır, beyin .then() zəncirlərini izləməli olmur. Dəyişənlər eyni scope-dadır — user obyektinə istənilən sətirdə müraciət edə bilərik.

Üstünlükləri:

• Oxunaqlılıq kəskin artır (xüsusilə 3+ asinxron əməliyyatda)
• try/catch ilə standart error handling
• Debugging asandır — breakpoint qoyub addım-addım keçə bilirsən
• Dəyişən paylaşımı təbiidir

Çatışmazlıqları:

• await yalnız async funksiya içində işləyir (top-level await artıq ES2022-də var)
• Paralel əməliyyatları unutmaq asandır (aşağıda izah edəcəm)

---

⚠️ Ən Böyük Səhv: Lazımsız Ardıcıllıq

Bakıda code review-larda ən çox gördüyüm problem budur. İki bir-birindən asılı olmayan request-i ardıcıl yazırlar:

javascriptKopyala
// ❌ SƏHV — lazımsız gözləmə (təxminən 2 saniyə)
async function loadDashboard() {
  const user = await fetchUser();       // 1 san gözlə
  const products = await fetchProducts(); // + 1 san gözlə
  return { user, products };
}

// ✅ DOĞRU — paralel icra (təxminən 1 saniyə)
async function loadDashboard() {
  const [user, products] = await Promise.all([
    fetchUser(),
    fetchProducts()
  ]);
  return { user, products };
}

Bu fərq real layihələrdə böyük təsir edir. Təsəvvür edin, e-commerce saytında dashboard yükləyirsiniz — 5 müstəqil API call var. Ardıcıl yazsanız 5 saniyə, Promise.all() ilə yazsanız 1 saniyə. İstifadəçi 4 saniyə fərqi hiss edir, bounce rate artır, maaşınız artmır. 😅

---

Real Dünya Müqayisəsi: Nə Vaxt Hansı?

Budur, praktiki qərar cədvəlim:

---

Interview Sualı: Stack Overflow-un 2025 Survey Nə Deyir?

Stack Overflow-un 2025 Developer Survey nəticələrinə görə JavaScript developerlərinin 92%-i async/await-i əsas asinxron pattern kimi istifadə edir. .then() isə əsasən utility funksiyalar və one-liner-lar üçün saxlanılır.

Azərbaycan bazarına baxsaq, LinkedIn-də Bakıda JavaScript/TypeScript developer vakansiyaları üçün orta maaş aralığı 1200-2500 AZN (junior-mid) və 3000-5500 AZN (senior) civarındadır. Bu vakansiyaların demək olar ki, hamısında async pattern biliyini gözləyirlər — xüsusilə Node.js backend rollarında.

---

Bonus: Hər İkisini Birləşdirin

Ən yaxşı developerlər dogmatik olmur. Real layihədə hər ikisini birləşdirə bilərsiniz:

javascriptKopyala
// Async/await əsas axış üçün, .then() utility üçün
async function processPayment(orderId) {
  try {
    const order = await getOrder(orderId);
    
    // Paralel: ödəniş və inventar yoxlanışı
    const [payment, stock] = await Promise.all([
      chargeCard(order.total),
      checkInventory(order.items)
    ]);
    
    // Fire-and-forget: analitika göndər (gözləmə yoxdur)
    sendAnalytics({ event: 'payment_success', orderId })
      .then(() => console.log('Analitika göndərildi'))
      .catch(() => console.warn('Analitika uğursuz — amma əsas iş getdi'));
    
    return { success: true, payment, stock };
  } catch (error) {
    await logError(error);
    throw error;
  }
}

Burada sendAnalytics üçün .then() istifadə etdik, çünki əsas axışı bloklamaq istəmirik. Amma əsas business logic async/await ilə yazılıb.

---

Nəticə: Qızıl Qayda

Default olaraq async/await yazın. Kod oxunaqlıdır, debug asandır, komanda yoldaşlarınız anlamaqda çətinlik çəkmir.

.then() istifadə edin yalnız bu hallarda:

• Fire-and-forget əməliyyatlar
• Sadə bir transform (.then(res => res.json()))
• Legacy code ilə işləyirsinizsə

Və unutmayın — paralel əməliyyatlar üçün Promise.all() həmişə dostunuzdur.

Müsahibəyə gedəndə bu cavabı versəniz, interviewer-in gözündə fərqlənəcəksiniz. Uğurlar, dostlar! 🚀

---

Sualınız var? Şərhlərdə yazın, birlikdə debug edək. 💬