async/await vs Promises في JavaScript: شو الفرق؟

من أول مفاهيم تلخبط المبرمج المبتدئ بـ JavaScript: Promises وasync/await شكلهم مختلف تمامًا، فهل هم شيء مختلف؟ الجواب: لأ — نفس الآلية بالضبط، بس بصياغتين مختلفتين.

Promises — الأساس

Promise هو كائن بيمثّل نتيجة عملية غير متزامنة (زي طلب من سيرفر) رح تخلص بالمستقبل — إما بنجاح (resolve) أو بفشل (reject):

fetch("/api/users")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("خطأ:", error));

كل .then() بيرجع Promise جديد، فتقدر تسلسل عدة خطوات وراء بعض — لكن مع سلاسل طويلة (كتير .then() وراء بعض) الكود بيصير صعب القراءة، معروف باسم "Promise chaining hell".

async/await — نفس الشي بصياغة أوضح

async/await صيغة أحدث بتخلي نفس الكود يتقرأ متل كود متزامن عادي، بدون سلاسل .then():

async function getUsers() {
  try {
    const response = await fetch("/api/users");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("خطأ:", error);
  }
}

لاحظ: نفس المنطق بالضبط (fetch → json → معالجة → catch الخطأ)، بس أسهل بكثير تتبعه بالعين، خصوصًا مع خطوات كتيرة متسلسلة.

جدول المقارنة

خطأ شائع: await بالتسلسل بدل التوازي

// ❌ بطيء بلا داعي — كل واحدة بتستنى التانية تخلص
const user = await fetchUser();
const posts = await fetchPosts();

// ✅ أسرع — الاثنين يشتغلوا بنفس الوقت
const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);

لو العمليتين مش معتمدة على بعض (نتيجة الأولى مو مطلوبة للتانية)، استخدم Promise.all() دائمًا — الفرق بالسرعة ملموس خصوصًا مع طلبات شبكة بطيئة.

الخلاصة

Promises وasync/await مو شيئين منفصلين — async/await هو ببساطة طريقة أوضح لكتابة نفس Promises. تعلّم Promises الأول عشان تفهم الآلية الحقيقية (resolve/reject)، وبعدها استخدم async/await بشكل يومي لأنه أسهل بالقراءة والصيانة.

ابدأ مسار JavaScript الكامل بالعربي — من الأساسيات لحد البرمجة غير المتزامنة المتقدمة.