JavaScript • المستوى الرابع • الدرس 1

البرمجة غير المتزامنة والوعود (Promises & Async/Await)

أهداف الدرس العلمية

فهم الفرق بين الكود المتزامن (Synchronous) وغير المتزامن (Asynchronous).
استيعاب مفهوم كائنات الوعود (Promises) وحالاتها (Pending, Resolved, Rejected).
كتابة الكود غير المتزامن بأسلوب سهل ومنظم باستخدام async و await.
التعامل مع الأخطاء غير المتزامنة باستخدام كتلة try...catch.

1. ما هي البرمجة غير المتزامنة (Asynchronous JS)؟

تستغرق بعض المهام في المتصفح وقتاً لتكتمل (مثل جلب البيانات من خادم أو انتظار استجابة قاعدة البيانات). تجنبنا البرمجة غير المتزامنة تجميد واجهة المستخدم أثناء انتظار اكتمال هذه المهام.

2. صياغة async / await و try...catch

نضع الكلمة async قبل تعريف الدالة لتقبل الانتظار، ونستخدم await قبل العملية غير المتزامنة لتوقف تنفيذ الدالة لحين ورود النتيجة:

javascript

async function loadProfile() {
  try {
    let response = await fetchUserData();
    console.log("البيانات:", response);
  } catch (error) {
    console.log("حدث خطأ أثناء جلب البيانات:", error);
  }
}

التطبيق العملي المباشر

تحدي الدرس الأول: إنشاء دالة غير متزامنة

قم بكتابة كود JavaScript داخل وسم <script> لتنفيذ الخطوات التالية:

إنشاء دالة غير متزامنة باستخدام الكلمة المحجوزة async function showMessage().
داخل الدالة، انتظر نتيجة الدالة الجاهزة fetchData() باستخدام await وخزنها في متغير.
اطبع النتيجة في الكونسول بـ console.log()، ثم قم باستدعاء الدالة showMessage().

محرر الأكواد — HTML

14px

جارٍ تهيئة البيئة...

المخرجات — المخرجات

الكونسول (Console)

13px

nahda@runner — html

0 lines

(لا يوجد إخراج)

HTMLLn 32, Col 1UTF-8Spaces: 2

682 chars

فهرس المستوى 4 الانتقال للمشروع النهائي