يعد Callback hell أيضًا موضوعًا ساخنًا في المقابلات الفنية ، لأنه يختبر فهم المطور للتعليمات البرمجية غير المتزامنة وقدرته على إعادة بناء التعليمات البرمجية لتحسين قابلية القراءة وقابلية الصيانة.

مقدمة

تعد البرمجة غير المتزامنة أمرًا بالغ الأهمية في تطوير JavaScript الحديث، مما يتيح التنفيذ غير المحظور وتحسين الأداء، خاصة بالنسبة للعمليات المرتبطة بالإدخال/الإخراج. ومع ذلك، يمكن أن تؤدي هذه الراحة أحيانًا إلى حالة تُعرف باسم "جحيم رد الاتصال."

في هذه المقالة سنتناول ما يلي:

1. ما هو جحيم رد الاتصال وكيف ينشأ.
2. المشاكل التي يخلقها.
3. الحلول، بما في ذلك استخدام الوعود وعدم المزامنة/الانتظار.
4. أمثلة التعليمات البرمجية لتوضيح كل شيء.

ما هو رد الاتصال بالجحيم؟

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

مثال على Callback Hell:

getData(function(data) {
  processData(data, function(processedData) {
    saveData(processedData, function(response) {
      sendNotification(response, function(notificationResult) {
        console.log("All done!");
      });
    });
  });
});

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

مشكلة رد الاتصال بالجحيم

جحيم رد الاتصال يؤدي إلى عدة مشكلات:

1. يصعب صيانته: يصعب تعديل/توسيع التعليمات البرمجية المتداخلة بشدة. يمكنك إدخال الأخطاء بمجرد محاولة إضافة وظائف جديدة.
2. معالجة الأخطاء: تصبح المعالجة الصحيحة للأخطاء عبر الطبقات المتداخلة المختلفة أمرًا معقدًا. يجب عليك معالجة الأخطاء لكل رد اتصال فردي، مما قد يؤدي إلى تكرار التعليمات البرمجية.
3. إمكانية قراءة التعليمات البرمجية: يصبح فهم تدفق التنفيذ أمرًا صعبًا، خاصة بالنسبة للمطورين الذين ليسوا على دراية بقاعدة التعليمات البرمجية.
4. قابلية التوسع: مع تزايد عدد عمليات الاسترجاعات المتداخلة، يزداد التعقيد أيضًا، مما يجعل التعليمات البرمجية غير قابلة للتطوير ويصعب تصحيح الأخطاء.

الوعود: حل لجحيم رد الاتصال

للتخفيف من مشاكل رد الاتصال، يتم استخدام الوعود في JavaScript. تمثل الوعود الإكمال (أو الفشل) النهائي لعملية غير متزامنة وتسمح لك بكتابة تعليمات برمجية نظيفة وأكثر قابلية للإدارة. الوعود تبسيط الكود - باستخدام الوعود، يتم تسوية البنية المتداخلة، وتصبح معالجة الأخطاء أكثر مركزية، مما يجعل قراءة الكود وصيانته أسهل.

إليك كيف سيبدو مثال رد الاتصال السابق باستخدام الوعود:

getData()
 .then(data => processData(data))
 .then(processedData => saveData(processedData))
 .then(response => sendNotification(response))
 .then(notificationResult => {
 console.log("All done!");
 })
 .catch(error => {
 console.error("An error occurred:", error);
 });

يزيل هذا الأسلوب عمليات الاسترجاعات المتداخلة بشدة. تمثل كل كتلة "ثم" الخطوة التالية في السلسلة، مما يجعل التدفق أكثر خطية وأسهل في المتابعة. تتم أيضًا معالجة الأخطاء بشكل مركزي في كتلة "الالتقاط".

كيف تعمل الوعود

الوعود لها ثلاث حالات محتملة:

1. معلق: الحالة الأولية، أي أن الوعد لم يتم الوفاء به أو رفضه بعد.
2. تم التنفيذ: اكتملت العملية غير المتزامنة بنجاح.
3. مرفوضة: فشلت العملية.

يوفر كائن الوعد أساليب '.then()' و'.catch()' للتعامل مع سيناريوهات النجاح والفشل.

function getData() {
 return new Promise((resolve, reject) => {
 // Simulating an async operation (e.g., API call)
 setTimeout(() => {
 const data = "Sample Data";
 resolve(data);
 }, 1000);
 });
}
getData()
 .then(data => {
 console.log("Data received:", data);
 })
 .catch(error => {
 console.error("Error fetching data:", error);
 });

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

وعود التسلسل

إحدى المزايا الرئيسية للوعود هي إمكانية تقييدها بالسلاسل. وهذا يسمح بتسلسل العمليات غير المتزامنة دون تداخل.

function fetchData() {
 return new Promise((resolve, reject) => {
 setTimeout(() => resolve("Data fetched"), 1000);
 });
}
function processData(data) {
 return new Promise((resolve, reject) => {
 setTimeout(() => resolve(`${data} and processed`), 1000);
 });
}
function saveData(data) {
 return new Promise((resolve, reject) => {
 setTimeout(() => resolve(`${data} and saved`), 1000);
 });
}
fetchData()
 .then(data => processData(data))
 .then(processedData => saveData(processedData))
 .then(result => {
 console.log(result); 
// Output => Data fetched and processed and saved
 })
 .catch(error => console.error("Error:", error));

من خلال تسلسل الوعود، تصبح التعليمات البرمجية مسطحة وأكثر قابلية للقراءة وأسهل للصيانة.

غير متزامن/انتظار: بديل أفضل

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

استخدام المزامنة/الانتظار:

async function performOperations() {
  try {
    const data = await getData();
    const processedData = await processData(data);
    const response = await saveData(processedData);
    const notificationResult = await sendNotification(response);

    console.log("All done!");
  } catch (error) {
    console.error("Error:", error);
  }
}

performOperations();

في الكود أعلاه:

• يتم استخدام الكلمة الأساسية "غير متزامنة" لتحديد وظيفة غير متزامنة.
• يقوم "الانتظار" بإيقاف تنفيذ الوظيفة مؤقتًا حتى يتم حل الوعد أو رفضه، مما يجعل الكود يبدو متزامنًا.
• تعتبر معالجة الأخطاء أسهل بكثير، وذلك باستخدام كتلة "محاولة الالتقاط" واحدة.
• يزيل Async/await جحيم رد الاتصال وسلاسل الوعود الطويلة، مما يجعله الطريقة المفضلة للتعامل مع العمليات غير المتزامنة في JavaScript الحديثة.

خاتمة

Callback hell هي مشكلة شائعة في JavaScript والتي تنشأ عند العمل مع عمليات متعددة غير متزامنة. تؤدي عمليات الاسترجاعات المتداخلة بعمق إلى تعليمات برمجية لا يمكن صيانتها وعرضة للخطأ. ومع ذلك، مع تقديم Promises وasync/await، أصبح لدى المطورين الآن طرق لكتابة تعليمات برمجية أكثر وضوحًا وأكثر قابلية للإدارة وقابلة للتطوير.

الوعود تعمل على تسوية عمليات الاسترجاعات المتداخلة ومعالجة الأخطاء بشكل مركزي، بينما تعمل async/await على تبسيط المنطق غير المتزامن من خلال جعله يبدو متزامنًا. تقضي كلتا الطريقتين على فوضى رد الاتصال وتضمن بقاء التعليمات البرمجية الخاصة بك قابلة للقراءة، حتى مع تزايد تعقيدها.

مقابض وسائل التواصل الاجتماعي
إذا وجدت هذه المقالة مفيدة، فلا تتردد في التواصل معي على قنوات التواصل الاجتماعي الخاصة بي للحصول على مزيد من الأفكار:

• جيت هاب: [AmanjotSingh0908]
• لينكد إن: [أمانجوت سينغ سايني]
• تويتر: [@AmanjotSingh]

شكرًا على القراءة!