استفسار بخصوص async / await في جافاسكريبت

عند استخدام async/await فإنه يتم تنفيذ الكود بشكل متسلسل حيث يتم الانتظار حتى ينتهي الكود الذي يحتوي على الـ await ثم يتم تنفيذ الكود الذي يليه وهكذا، وذلك لأن الهدف اصلاً من الـ  async/await هو ان تحول الدوال الغير متزامنة إلى دوال متزامنة (متزامنة أي تحدث بالترتيب).

لتعرف اكثر يمكنك الاطلاع على المقال التالي :

التوثيق المقدم من موسوعة حسوب

في هذا المثال دالة ال setTimeout تعتبر async لكن هنا طبع الجمل بالترتيب وقام بطباعه ال promise في النهايه  عكس المثال في الاعلى ؟

بتاريخ 6 دقائق مضت قال Moath Haimour:

في هذا المثال دالة ال setTimeout تعتبر async لكن هنا طبع الجمل بالترتيب وقام بطباعه ال promise في النهايه  عكس المثال في الاعلى ؟

في المثال، الدالة setTimeout ليست فعلاً async ولا تعود بقيمة Promise، حيث أن الدالة setTimeout تستخدم لتأجيل تنفيذ كود معين بعد فترة زمنية محددة.

إليك توضيحًا لتسلسل الأحداث في المثال:

1. طباعة السطر "1: execute".
2. تُستدعى دالة setTimeout وتُمرر إليها وظيفة مستدعاة للتنفيذ (console.log('moath')) وفترة زمنية بالمللي ثانية (1000 مللي ثانية أو 1 ثانية).
3. طباعة القيمة المُرجعة من setTimeout. هذه القيمة هي معرّف للمؤقت (timeout) المنشئ ويمكن استخدامه لإلغاء المؤقت في حالة الحاجة، القيمة المُرجعة هي رقم يُمثل المؤقت.
4. طباعة السطر "2: execute".
5. تنفيذ الوقت المُحدد للمؤقت (1 ثانية) ويتم طباعة "moath".

لاحظ أنه لا يتم استخدام await في المثال، وبالتالي لا يتأثر تسلسل الأحداث بوجودها.

,إذا كنت ترغب في استخدام await مع setTimeout، فتستطيع استخدام setTimeout داخل دالة مستدعاة async واستخدام await معها، كما يلي:

(async () => {
  console.log("1: execute");
  const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  await delay(1000);
  console.log("moath");

  console.log("2: execute");
})();

دالة delay تستخدم setTimeout داخل Promise، ومن ثم يتم استخدام await لاستدعاء الدالة delay وتأجيل تنفيذ الكود التالي حتى ينتهي الوقت المُحدد، مما يضمن تسلسل تنفيذ الأحداث كما هو متوقع.

بتاريخ 16 ساعة قال Moath Haimour:

في هذا المثال دالة ال setTimeout تعتبر async لكن هنا طبع الجمل بالترتيب وقام بطباعه ال promise في النهايه  عكس المثال في الاعلى ؟

 

في المثال الأول 

شرح الكود:

•  يتم تعريف الدالة الرئيسية على أنها async لإمكانية استخدام await بداخلها.
•  تم استخدام try/catch لمعالجة أي أخطاء.
•  يتم طباعة '1: Will get dog pics!' كرسالة أولى. 
•  يتم انتظار نتيجة الدالة getDogPic() وتسنيدها إلى المتغير x باستخدام await.
•  يتم طباعة قيمة المتغير x.
•  ثم يتم طباعة '3: Done getting dog pics!' كرسالة أخيرة.
•  في حال وجود خطأ، سيتم طباعة 'ERROR'.
•  ثم يتم استدعاء الدالة الرئيسية مباشرة في السطر الأخير. 

أما بالنسبة للمثال التالي فكما أخبرك مصطفى في إن ال setTimeout و await هما طريقتان مختلفتان لتحكم في الوقت المستغرق لتنفيذ كود في لغة جافاسكربت، لكنهما يستخدمان لأغراض مختلفة.

setTimeout: تستخدم لتأجيل تنفيذ الأمر أو الدالة لفترة زمنية محددة. ويتم استخدامها عادةً لتنفيذ الأوامر بعد فترة محددة من الزمن، مثل إنشاء تأخير في تنفيذ الأوامر أو لتنفيذ بعض الأوامر بشكل دوري بين فترات زمنية محددة.

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

بمعنى آخر، يستخدم setTimeout لتأخير تنفيذ الأوامر لفترة زمنية محددة، بينما يستخدم await للانتظار حتى يتم الانتهاء من تنفيذ أمر ما قبل المتابعة في تنفيذ الأوامر التالية. وعلى الرغم من أنهما يحتويان على مفهوم التحكم في الوقت، إلا أن استخداماتهما مختلفة ويتم استخدام كل منهما في السياق المناسب.