الوحدة 9: البرمجة غير المتزامنة (Asynchronous Programming) في JavaScript

إليك كورس كامل عن الوحدة 9: البرمجة غير المتزامنة (Asynchronous Programming) في JavaScript، والتي تشرح كيفية التعامل مع العمليات غير المتزامنة في JavaScript، وكيفية استخدام التقنيات المختلفة مثل الـ Promises و Async/Await.

الوحدة 9: البرمجة غير المتزامنة (Asynchronous Programming) في JavaScript

الدرس 1: مقدمة في البرمجة غير المتزامنة

• المفهوم الأساسي: البرمجة غير المتزامنة هي نمط في البرمجة يسمح بتنفيذ العمليات بشكل غير متسلسل، بحيث لا تحتاج العمليات التي تستغرق وقتًا طويلًا (مثل تحميل البيانات من الخادم أو قراءة الملفات) إلى إيقاف تنفيذ البرنامج.

1. لماذا نحتاج إلى البرمجة غير المتزامنة؟

• عند تنفيذ العمليات المتزامنة، إذا كانت إحدى العمليات تستغرق وقتًا طويلًا، مثل الاتصال بالخادم، فإن باقي العمليات تتوقف حتى تنتهي العملية الطويلة. لكن في البرمجة غير المتزامنة، يتم تنفيذ العمليات بشكل غير متسلسل مما يحسن الأداء ويجعل التطبيق أكثر استجابة.

الدرس 2: فهم الـ Callbacks (الدوال الراجعة)

• المفهوم: الـ Callback هو دالة يتم تمريرها كوسيط لدالة أخرى، ويتم استدعاؤها عند اكتمال العملية.

1. مثال بسيط على Callbacks

• عند استخدام callbacks، يمكن استدعاء دالة بعد إتمام عملية معينة.
  javascript

  Copy code

  function fetchData(callback) {
  setTimeout(function() {
  console.log("تم جلب البيانات");
  callback(); // استدعاء الدالة الراجعة بعد اكتمال العملية
  }, 2000); // محاكاة عملية غير متزامنة (انتظار 2 ثانية)
  }

  fetchData(function() {
console.log("العملية اكتملت!");
});


2. عيوب استخدام Callbacks

• Callback Hell: عندما يتم تمرير العديد من الـ callbacks المتداخلة، قد يصبح الكود غير قابل للقراءة والصيانة. هذا يُعرف بـ Callback Hell.
  javascript

  Copy code

  fetchData(function() {
fetchData(function() {
fetchData(function() {
// المزيد من الكود
});
});
});


الدرس 3: استخدام الـ Promises

• المفهوم: الـ Promise هو كائن يُستخدم للتعامل مع العمليات غير المتزامنة بطريقة أكثر وضوحًا، حيث يسمح بتحديد ما يجب فعله عندما تنتهي العملية أو عندما تفشل.

1. إنشاء Promise

• عند إنشاء Promise، يتم تنفيذ دالة تحتوي على عملية غير متزامنة، وإذا نجحت، يتم استدعاء الدالة resolve، وإذا فشلت، يتم استدعاء الدالة reject.
  javascript

  Copy code

  let myPromise = new Promise(function(resolve, reject) {
  let success = true; // محاكاة نجاح العملية أو فشلها
  if (success) {
  resolve("تم النجاح!");
  } else {
  reject("حدث خطأ!");
  }
  });

  myPromise
.then(function(result) {
console.log(result); // "تم النجاح!"
})
.catch(function(error) {
console.log(error); // "حدث خطأ!"
});


2. سلسلة الـ Promises

• يمكن استخدام then() لربط عدة عمليات غير متزامنة.
  javascript

  Copy code

  fetchData()
.then(function(response) {
return processData(response);
})
.then(function(processedData) {
console.log("البيانات المعالجة: ", processedData);
})
.catch(function(error) {
console.log("حدث خطأ: ", error);
});


الدرس 4: استخدام الـ Async/Await

• المفهوم: async و await هما جزء من JavaScript يسمحان بكتابة الكود المتزامن بشكل غير متزامن باستخدام promises. تجعل هذه الطريقة الكود أكثر نظافة ووضوحًا.

1. تعريف دالة async

• عند استخدام async في دالة، يتم تحويل هذه الدالة إلى دالة ترجع Promise، ويصبح من الممكن استخدام await بداخلها.
  javascript

  Copy code

  async function fetchData() {
  return "تم جلب البيانات";
  }

  fetchData().then(function(result) {
console.log(result); // "تم جلب البيانات"
});


2. استخدام await مع الـ Promises

• await تستخدم لانتظار إتمام العملية داخل دالة async، حيث توقف تنفيذ الكود حتى ينتهي الـ Promise.
  javascript

  Copy code

  async function fetchData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  return data;
  }

  fetchData()
.then(function(data) {
console.log(data); // بيانات الخادم
})
.catch(function(error) {
console.log("حدث خطأ: ", error);
});


3. التعامل مع الأخطاء باستخدام try/catch

• مع استخدام async/await، يمكن استخدام try/catch للتعامل مع الأخطاء في العمليات غير المتزامنة.
  javascript

  Copy code

  async function fetchData() {
  try {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  console.log(data);
  } catch (error) {
  console.log("حدث خطأ: ", error);
  }
  }

  fetchData();


الدرس 5: عمليات متعددة غير متزامنة (Concurrency)

• المفهوم: أحيانًا نحتاج إلى التعامل مع عدة عمليات غير متزامنة في نفس الوقت (التوازي). يمكن استخدام Promise.all() أو Promise.race() لتحقيق ذلك.

1. Promise.all()

• Promise.all() يسمح بتشغيل عدة عمليات غير متزامنة في نفس الوقت وانتظار أن تكتمل جميعها.
  javascript

  Copy code

  let promise1 = fetchData();
  let promise2 = processData();

  Promise.all([promise1, promise2])
.then(function(results) {
console.log("جميع العمليات اكتملت");
})
.catch(function(error) {
console.log("حدث خطأ في إحدى العمليات: ", error);
});


2. Promise.race()

• Promise.race() ينتظر أي عملية تنتهي أولًا ويعود بالنتيجة.
  javascript

  Copy code

  let promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, "العملية 1"));
  let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, "العملية 2"));

  Promise.race([promise1, promise2])
.then(function(result) {
console.log(result); // "العملية 2"
})
.catch(function(error) {
console.log("حدث خطأ: ", error);
});


الدرس 6: تنفيذ العمليات غير المتزامنة في الوقت الفعلي

• المفهوم: في التطبيقات الحية مثل التطبيقات التي تتطلب تحديثات في الوقت الفعلي (مثل تطبيقات الدردشة أو الألعاب)، قد تحتاج إلى البرمجة غير المتزامنة لضمان استجابة سريعة.

1. استخدام Web APIs مع async/await

• يمكنك التعامل مع واجهات برمجة التطبيقات (APIs) خارجية في JavaScript باستخدام fetch مع async/await لتحميل البيانات في الوقت الفعلي.
  javascript

  Copy code

  async function getWeather(city) {
  let response = await fetch(`https://api.weather.com/v1/city/${city}`);
  let weatherData = await response.json();
  return weatherData;
  }

  getWeather("Cairo")
.then(function(data) {
console.log("حالة الطقس: ", data);
})
.catch(function(error) {
console.log("حدث خطأ: ", error);
});


الدرس 7: تلخيص الوحدة

• البرمجة غير المتزامنة هي أسلوب يسمح بإجراء العمليات دون التأثير على سير البرنامج.
• Callbacks: طريقة قديمة للتعامل مع العمليات غير المتزامنة، لكن قد تؤدي إلى “Callback Hell”.
• Promises: توفر طريقة أكثر مرونة وأوضح للتعامل مع العمليات غير المتزامنة.
• Async/Await: تجعل كتابة الكود غير المتزامن مشابهة للكود المتزامن، مما يسهل القراءة والصيانة.
• التوازي: يمكن استخدام Promise.all() و Promise.race() لإدارة عدة عمليات غير متزامنة.

المشاريع العملية للوحدة 9:

• مشروع 1: بناء تطبيق يقوم بتحميل البيانات من عدة واجهات برمجة التطبيقات (APIs) بشكل متوازي ويعرض النتائج.
• مشروع 2: تصميم تطبيق دردشة بسيط يستخدم async/await لتحميل الرسائل في الوقت الفعلي.
• مشروع 3: إنشاء تطبيق لعرض حالة الطقس باستخدام fetch و async/await.