شرح JavaScript Promises و Async/Await

تخيل أنك تطلب بيتزا عبر الإنترنت.

تقوم بتقديم طلبك، لكنك لا تقف عند باب منزلك دون فعل شيء حتى تصل البيتزا. بل تشاهد مقاطع الفيديو، أو تعمل، أو تتحدث مع الأصدقاء. وعندما تصل البيتزا، تأكلها.

تعمل JavaScript بنفس الطريقة.

العمليات مثل طلبات API، واستدعاءات قواعد البيانات، والمؤقتات (timers) تستغرق وقتاً. إذا انتظرت JavaScript انتهاء كل مهمة، فسوف يتجمد تطبيقك. بدلاً من ذلك، تقوم JavaScript بتشغيل أكواد أخرى أثناء انتظار النتائج.

ما هو الـ Promise؟

الـ Promise هو عبارة عن مكان محجوز لقيمة ستحصل عليها في المستقبل.

عندما تقوم بتشغيل: const promise = fetch("/users");

البيانات ليست موجودة بعد. يقول الـ Promise: "ليس لدي النتيجة الآن، ولكن سأخبرك عندما تصبح جاهزة".

للـ Promise ثلاث حالات:

معظم واجهات برمجة التطبيقات (APIs) الحديثة مثل fetch() تعيد Promise تلقائياً. لست بحاجة لإنشائها يدوياً في كل مرة، بل تكتفي باستخدامها فقط.

ماذا تفعل .then()؟

يعتقد الكثيرون أن .then() تقوم بجلب البيانات، لكن هذا غير صحيح.

تقوم .then() بتسجيل دالة استدعاء (callback function). أنت تخبر JavaScript: "عندما ينتهي هذا الـ Promise، قم بتشغيل هذه الدالة المحددة".

الأمر يشبه تطبيقات توصيل الطعام؛ تطلب الطعام، ويخبرك التطبيق: "اتصل بي عندما يصل الطعام". الدالة هنا تنتظر الإشارة.

لماذا نستخدم Async/Await؟

يمكنك ربط استدعاءات .then() ببعضها للحصول على البيانات خطوة بخطوة. هذا يعمل، لكن السلاسل الطويلة يصعب قراءتها.

تجعل async/await الكود الخاص بك يبدو ككود عادي يتم تنفيذه خطوة بخطوة، مما يجعله أكثر نظافة وسهولة في التتبع.

هل يقوم await بإيقاف (block) JavaScript؟

هذا سؤال شائع في مقابلات العمل. الإجابة هي: لا.

عندما تصل JavaScript إلى كلمة await المفتاحية، فإنها توقف تلك الدالة الـ async المحددة فقط، بينما يستمر باقي التطبيق في العمل.

مثال على التدفق:

  1. تشغيل الكود داخل الدالة.
  2. الوصول إلى await وإيقاف تلك الدالة.
  3. تشغيل بقية السكربت.
  4. بمجرد انتهاء المهمة، يتم استئناف الدالة.

ملخص:

المصدر: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm