نظرة على : Javascript Async Await

ملاحظة : للحصول على تجربة أفضل أثانء قراءة هذا المقال و التي يسعتمد على خاصية القراءة من اليمين الى اليسار و التي بدورها غير مدعومة في مدونات medium فالرجاء تحميل هذا البرنامج المساعد الذي سيحسن طريقة القراءة لأي مقال باللغة العربية.

للتحميل على متصفح Google Chrome الرجاء الضغط هنا.

كلنا او جلنا على الاقل على علم بأن لغة Javascript تعتبر لغة غريبة بغض الشيء و ليسما أثناء معالجتها للعمليات المتزامنة و غير المتزامنة (asynchronous and synchronous operations ) و قد يكون هذا الأخير موضوعا فلسفيا في حد ذاته اذ الكثير من المطورين يحاولون بشتى الطرق ترجمة ما يكون غالبا في اللغات البرمجية الأخرى و هذا قد يؤدي إلى ظهور العديد من المكتبات البرمجية التي تحاول ترجمة بعض المعطيات و الرغبات و نشرها.

في هذا المقال سنتطرق الى واحدة من اهم الاضافات في رأيي المتواضع و التي تم إدراجها في اللغة في نستخها الثامنة ( سأحاول كتابة مقال آخر يتطرق الى نسخ اللغة المتخلفة مع أبرز الإضافات و التغييرات في القريب العاجل) هذه الاضافة و التي تم استيحائها من أقرب لغة يتم تخيلها هي لغة السي شارب #C المطورة من قبل شركة ميكروسوفت . هذه الإضافة هي تطوير تدرجي لمختلف التعبيرات و التطويرات للغة Javascript و تمكين أفضل لمعالجتها للعمليات المتزامنة و التي في رأيي تحسن من المظهر الجمالي و العملي للبرنامج في حد ذاته اذ أصبح الأمر أقربا للبرمجة النظرية و سأفسر ذلك قريبا.

و لكن قبل التدرج الى موضوعنا الأساسي, دعوني استغل الفرصة لتذكير نفسي و تذكريكم بمدأ Promises في لغة Javascript.

لا أجد نفسي احبذ فكرة تسمية Object باسم “الكائن” في اللغة العربية لذلك لن استعمل الترجمة الحرفية, و عليها سأقوم تبسمية الكلمات المفتاحية و الاساسية باللغة الانجليزية 🤓

Promises :

Promises هي واحدة من الطرق التي تم ادراجها في لغة Javascript و المراد بها تحسين طريقة كتابة العمليات الغير المتازمة و هذه الطريقة ستكون لاحقا العموذ الفقري لكل العمليات الغير المتزامنة أو كما يقال لها باللغة الانجليزية : Asynchronous Operations.

أيضا الهدف كان منها ايقاف العديد من الاخطاء و العمليات التي ستعقد من طريقة كاتبة و فحص. و حتى معاجلة الاخطاء المدرجة في واحدة من أهم الميزات التي جاءت بها منصة NodeJS ألا. و هي callbacks.الاستعمال الشيدي في الماض القريب للـ : Callbacks ادي الى ظهور نمط غريب من الممارسات و التي يطلق عليها مجازا : Callback Hell أو Callback Pyramid of Hell و هي أساسا محاولة المطوررين استعمال العديد من Callbacks في دالة واحدة او حتى استعمال اجابة كل Callback في الدالة الأتية ليصبح الكود المصدري تشبه الهرم أو شيئا قريبا للمثال الاتي :

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

الأن دعونا نحسن من البرنامج السابق لنستعمل Promises لنرى مدى التحسيين الذي سيحصل :

الـ Promise تعتمد على خاصيتين أساسييتين ألا و هما :

Resolving : و هنا اللـ Promise سيقوم بنجاح بالرجاع نتيجة أي عملية مطلوبة و للحصول على النتيجة عليها أن نقوم بايصال داللتنا بـ : then و التي بدورها ستقوم بالستعمال دالة محلية للحصول على النتيجة و هو الامر الذي تم القيام به في السطر الثاني من المصدر السابق, اذ ان البرنامج سيقوم بانتظار نتيجة ما في ” result “ و هو تنيجة ما قامنا به في السطر الأول.

Rejecting : و هنا سنقوم باارجاع الاخطاء الواردة أثناء تشغيل البرنامج و للحصول على هذا الخطا و تحسين من طريقة معالجتنا للأخطاء علينا استعمال الدالة catch و التي بدورها ستقوم بالستعمال دالة محلية للحصول على الخطأ الذي حصل , و هو ما تم القيام به أساسا في السطر الثاني عشر من الكوذ المصدري السابق.

الآن, اذا أمعنت النظر, ستلاحظ وجود نمط آخر شبيه لـ Callback Hell و هو Promises Hell و هو نفس النمط الذي أردنا التخلص منه آنفا و لكن الأمر تحول من سيء لأسوء, أيضا و إن كان الأمر بالنسبة الى أمرا شخصيا, و لكني أرى ان المنظر الجمالي لما تم كتابته أصبح سيئا للغاية. و أن نفس الشيئ ينطبق لمعالجة الأخطاء, اذ إن المعاجلة الخاطئة لأي خطأ قد يعرض برنامجنا لجملة أخطاء لا تغتفر و هذا شيء غير مقبول. و لذلك نحن بحاجة لشيء أفضل لتقليل عدد الأخطاء و كذا نسبة الفهم و التحسيينات المستقبلية لبرنامجنا.

النظرة الأولية على async/await

لنقم بإلقاء نظرة على مثال عملي لهذه الخاصية و كيفية عملها :

مثال عملي على خاصية async/await

لنشرح ما تم عمله :

1 — قمنا في السطر رقم 1 بتعريف دالة ذو خاصية محددة الا و هي خاصية التنفيذ المباشر يعني ان هذه الدالة ستقوم بتفيذ نفسها حالما يقوم مترجم اللغة بالوصول اليها , وهذا الخاصية هي مهمة جدا اذا ما اردنا العمل وفق آلية الانفاردية. ( سأقوم بكتابة مقالات تخص الطرق و الممارسات الفضلى أثناء كتابة الكود المصدري لبرنامج بلغة Javascript )

2 — اذا لاحظت جيدا فستلاحظ وجود الكلمة المدلالية async و التي ستقوم بدروها باعطائها خاصية Promise و منه سيكون اسخدام الكلمة المدلالية await متاحا.

3 — ما يمككنا فهمه من الأسطر السالف شرحها هو الأتي : البرنامج سيقوم بالاستغال أنيا بدون ان مساعدة منا بسبب خاصية الانفرادية التي ستشغل الرنامج لمرة واحدة اين أحد المكتبات المساعدة على عمليات HTTP و التي تدعم خاصية ارجاع Promise هذا الاخير سكون وعد او لتبسيط الامور هو مجرد وثيقة تفاهم محلية اين المكتبة التي ستقوم بعمليات HTTP تتعهد بالرجاع معلومة ما من أحد الخوادم المحلية أو الخارجية و مصدرنا المحلي او برنامجنا سيقوم بكل اريحية بالنتظار الاجابة و بعدها كما هو مكتوب في السطر الخامس, سنقوم برؤية او النظر الى ما يم ارجاعه من الخوادم كاجابة.

4 — ان لاحظت جيدا فانك ستحلاظ عدم وجود دالة then و التي تقوم بدور المتستمع أو تقوم بعمل الـ Promise Resolving و التي ستأتي بالنتيجة, فلآن ستقوم بسؤالي أين بديل ذلك, الاجابة على ذلك السؤال هي سهلة اذا كان بامكانك ملاحظة السطر الثالث فاننا نقوم نعملية Promise Resolving على مستوى الكلمة المدلالية await و عليه سنقوم بالحصول على المعطيات او المعلومات في المتغير result.

الآن, البعض سيقول كيف سيكون بامكاني معاجلة الأخطاء الناجمة اما عن خطأ محلي أو خطأ على مستوى الشبكة, اذا ان الامر كان سهلا في الماضي من خلال Promise Rejecting عن طريق دالة catch 🤔🤔

Try/Catch

الــ Try/Catch هي واحدة من أقدم الخواص في لغة Javascript اذ ان الترجمة الحرفية لها تعني : “جرب” و “ألتقط” يعني بكل سهولة جرب الدالة ان اشتغلت فلك ذلك و الا, ان نجم عن ذلك الاشتغال أي خطا ما سنقوم بالقاطه, الآن لنحسن من الكود السابق و لنظف Try/Catch

و بذلك نكون قد فرغنا لأن هذا هو بكل بساطة كل شيء يجب علينا علمه 🥳🥳🥳

و لكن من خلال كل ما قد ذكر, سيكون للعديد منكم أسئلة قد تؤدي لظهور أنماط جديدة, أنماط هي في الظاهر بسيطة و لكنها بدون معنى, و هذا ما سنقوم بالتطرق اليه في المقال القادم.

لا تنسوا الضغط على زر 👏 إن أعجبكم هذا المقال.

للمزيد من المقالات الرجاء زيارة و متابعة مدونتي في medium 🥰

شكرا مسبقا 😇😇 !

I Code 🤓, Travel ✈️ and i do other things in between 🌴 🎉

I Code 🤓, Travel ✈️ and i do other things in between 🌴 🎉