مقدمة
في الدرس السابق تعرفنا على Promises، وعرفنا أنها تمثل نتيجة عملية غير متزامنة يمكن أن تنجح أو تفشل.
لكن عند وجود عدة عمليات غير متزامنة، قد يصبح التعامل مع سلسلة طويلة من الـ Promises أقل وضوحًا.
لهذا توفر JavaScript أسلوبًا يسمى async/await يجعل كتابة هذا النوع من الكود أكثر سهولة ووضوحًا.
ما هي async؟
الكلمة async تستخدم مع الدالة لتحديد أنها دالة غير متزامنة.
الدالة التي تستخدم async تُرجع Promise، ويمكن استخدام await داخلها.
ما هي await؟
الكلمة await تستخدم لانتظار نتيجة Promise داخل دالة async.
عند استخدام await ينتظر تنفيذ الدالة الحالية نتيجة العملية قبل الانتقال إلى الخطوة التالية داخلها، بينما يستطيع باقي البرنامج الاستمرار في تنفيذ مهامه.
لماذا نستخدم async/await؟
تساعد async/await على جعل الكود أسهل في القراءة.
فبدلًا من كتابة سلسلة طويلة من التعاملات مع Promises، يمكن ترتيب الخطوات بطريقة أكثر وضوحًا وتشبه الكود المتسلسل العادي.
التعامل مع الأخطاء
يمكن استخدام try وcatch مع async/await للتعامل مع الأخطاء.
إذا فشلت العملية التي ننتظر نتيجتها، يمكن التقاط الخطأ والتعامل معه بدلًا من تركه دون معالجة.
async/await وواجهات API
من أكثر الاستخدامات الشائعة لـ async/await جلب البيانات من الخوادم وواجهات البرمجة APIs.
مثلًا يمكن للتطبيق:
1. إرسال طلب إلى الخادم
2. انتظار النتيجة
3. الحصول على البيانات
4. معالجة البيانات
5. عرضها للمستخدم
العلاقة بين async/await وPromises
async/await ليست تقنية منفصلة عن Promises، بل هي طريقة أكثر وضوحًا للتعامل معها.
لذلك من المهم فهم Promises أولًا قبل التعمق في async/await.
استخدام async/await في المشاريع
تستخدم في العديد من التطبيقات، مثل:
تطبيقات الويب
تطبيقات الطقس
المتاجر الإلكترونية
تطبيقات التواصل
التعامل مع APIs
التطبيقات التي تعتمد على الخوادم
فوائد async/await
من أهم فوائدها:
تحسين وضوح الكود
تسهيل قراءة العمليات المتتابعة
تسهيل التعامل مع الأخطاء
جعل الكود غير المتزامن أكثر تنظيمًا
تسهيل التعامل مع Promises
أخطاء شائعة عند المبتدئين
من الأخطاء الشائعة:
استخدام await في مكان غير مناسب
نسيان التعامل مع الأخطاء
الخلط بين Promise والنتيجة التي تنتج عنها
استخدام await دون الحاجة إليه
الاعتقاد أن await يوقف البرنامج بالكامل
ملخص الدرس
تعرفنا في هذا الدرس على async/await في JavaScript، وعرفنا كيف تساعد على التعامل مع Promises بطريقة أكثر وضوحًا، كما تعرفنا على دور async وawait وكيفية استخدام try/catch لمعالجة الأخطاء.
في الدرس الثاني والثلاثون سنتعرف على fetch()، وسنفهم كيف يمكن لـ JavaScript إرسال طلبات إلى الإنترنت وجلب البيانات من APIs.