JavaScript'te async/await yapısını Promise zincirleme ile aynı mantıkta kullanabiliyoruz, ama arkasındaki yürütme modeli tam olarak nasıl işliyor? Event loop, mikro görev kuyruğu ve call stack'in bu iki yaklaşımda rolü nedir? Ayrıca, await ifadesi birden çok Promise'i paralel çalıştırırken nasıl davranıyor? Kısaca, bu konseptlerin birbirine nasıl bağlandığını açıklayabilir misiniz?
JavaScript'te async/await ve Promise zincirleme mantığı nasıl çalışıyor?
👁️ 1 görüntüleme💬 2 cevap❤️ 0 beğeni
2 Cevap
أول مرة استخدمت async/await في مشروع صغير لتجميع بيانات من عدة API كان عندما كنت أعمل على لوحة تحكم تحلل إحصاءات الزوار. في البداية حاولت كتابة السلسلة باستخدام Promise متسلسلة (`fetchA().then(...).then(fetchB)`) لكن سرعان ما لاحظت أن الواجهة تصبح بطيئة لأن كل طلب ينتظر انتهاء السابق. عندما حولت الكود إلى async مع await، وضعت جميع الـ Promise في متغيرات قبل الانتظار:
```js
const p1 = fetch(url1);
const p2 = fetch(url2);
const p3 = fetch(url3);
const [r1, r2, r3] = await Promise.all([p1, p2, p3]);
```
هنا يظل الـ call stack قائمة على الدالة async حتى تصل إلى أول await. عند تنفيذ await يُحول الدالة إلى حالة “معلقة” وتُضيف المتابعة إلى الـ micro‑task queue، بينما يستمر الـ event loop في معالجة باقي المهام ومعالجة الـ macro‑tasks. إذا استخدمت await متسلسلاً (`await fetchA(); await fetchB();`)، فإن كل await يُضيف مهمة ميكرو إلى الـ queue بعد انتهاء الوعد السابق، وبالتالي يُعيد تنفيذ الدالة خطوة بخطوة. لكن عندما تستخدم Promise.all أو تجمع عدة وعود قبل الـ await، فإن جميع الـ Promise تُنفذ بالتوازي (في الـ micro‑task queue) وتُستقبل النتائج مرة واحدة، مما يسرّع الأداء. باختصار، async/await هو مجرد تعبئة ناعمة حول الـ Promise يسهل قراءة الكود، بينما يبقى نموذج التنفيذ نفسه: الـ call stack يتوقف عند await، الـ event loop يستمر، والـ micro‑task queue تحمل الاستكمالات للوعود سواء كانت متسلسلة أو متوازية.
Async/await temelde sadece Promise’ların "syntactic sugar"ı; bir `async` fonksiyon çağrıldığında hemen bir Promise döner ve fonksiyonun içindeki kod, `await` gördüğünde o anda yürütülmeyi durdurur. Burada gerçekleşen şey: `await` edilen Promise, çözülene kadar fonksiyonun geri kalan kısmı call‑stack’ten çıkar, kalan iş mikro‑görev kuyruğuna (micro‑task queue) konur. Event‑loop mikrogörev kuyruğundan bir görev alıp call‑stack’e iterek fonksiyonu devam ettirir. Promise zincirleme (`p.then(...).then(...)`) aynı şekilde her `.then` callbacki bir mikro‑görev olarak sıraya eklenir; yani `then` içinde dönen değer bir sonraki `then`’e aynı mikro‑görev döngüsü içinde geçer.
Paralel çalıştırma açısından `await` tek bir Promise’e odaklanır; birden fazla bağımsız async işlem varsa `await Promise.all([p1, p2])` şeklinde birleştirip hepsinin aynı anda başlatılmasını ve hepsi çözüldüğünde devam edilmesini sağlarsın. Böylece her bir Promise kendi mikro‑görevi olarak event‑loop’da yürür, `Promise.all` ise en uzun süreni bekler; sırayla `await p1; await p2;` yazarsan ikinci işlem birincinin bitmesini bekler, yani paralellik kaybolur. Kısacası async/await ve Promise zincirleme aynı async modelini kullanır, tek farkı sözdizimi ve okunurluktür; mikro‑görev kuyruğu ve call‑stack bu iki yaklaşımla aynı şekilde çalışır. Valla, kodunu `Promise.all` ile paralel tutup `await` ile sonuçları alırsan hem performans kazanırsın hem de hataları tek bir yerde yakalayabilirsin.