زمان استفاده از async await در جاوااسكريپت

سلام جاواسکریپت به صورت پیشفرض asynchronous هست و کدها پشت سر هم اجرا نمی شوند ولی ما در بعضی از متد ها نیاز داریم که کدها به صورت Synchronous یعنی پشت سر هم اجرا شوند این عمل بیشتر برای api صورت می گیره یعنی js منتظر می مونه تا شما دیتا رو از api بگیرید. اگر بخواهیم از async و await استفاده کنیم باید فانشکن را به این شکل بنویسیم :

async function foo() {
   await 1
}

اطلاعات بیشتر

@websaz
يعني براي همين مثالي كه براي نمرات كاربران بود استفاده از async await منطقي بود؟

بله منطقی هست.

سلام برخلاف چیزی که دوستمون گفت js به صورت Synchronous کار میکنه (‌ اصلا مگه داریم زبانی که بصورت asynch همیشه کار کنه) و تک نرخی یا همون singleThread است و فقط دستورات زمانبر بصورت asynch کار میکنند. حالا زمانبر یعنی چقدر؟ یعنی بیشتر از صدم ثانیه. جاوااسکریپت هر دستور را در صدم ثانیه انجام میده و میره خط بعد.
در واقع تک نخ یعنی جاوا اسکریپت کد های را به صورت خطی و پشت هم اجرا می کند و در هر لحظه توانایی اجرای یک چیز را دارد و هر فعالیت باید منتظر بماند تا فعالیت قبلی اجرا شود تا بتواند خود اجرا گردد و قابلیت اجرای موازی کدها را ندارد! اگر بخوام با جزئیات بیشتر بگم همه دستورات و کدها و توابع داخل Call stack جاوااسکریپت قرار میگیرند و به ترتیب از بالا اجرا میشوند.
وقتی که یک تابع رو فراخوانی میکنید، اون تابع به Stack اضافه میشه. اگر در داخل تابع مورد نظر، یک تابع دیگر فراخوانی بشه، اون توابع به ترتیب به Stack اضافه میشه و بالای تابع اول قرار میگیرن و به همین ترتیب پیش میره تا همه توابع مورد نظر درون اون تابع به Stack اضافه بشن و نوبت اونا برای اجرا شدن مشخص بشه.
حالا وقتی که شما یک ارسال درخواست میکنید، این کار زمانبر است و زمان آن هم مشخص نیست (‌ حتی اگر سمت سرور بخواهد بلافاصله عبارت true را در response بدهد) پس موتور جاوااسکریپت تا کی باید صبر کند؟ نمیداند شاید سرور خاموش باشد و هرگز جواب ندهد. آیا باید موتور جاوااسکریپت بلاک شود و منتظر باشد؟ خیر، بلاک نمیشود و Callback queue کارها رو مدیریت میکنه و انجام میده.
هر بار که از setTimeout یا هر عملیات Async دیگری استفاده میکنید، اون عملیات به جدول رویدادها یا Event table اضافه میشود که مشخص میکنه که یک تابع خاص باید بعد از یک رویداد خاص اجرا بشه. مثلا یک تابع خاص بعد از آمدن response انجام شود. حالا بعد از اینکه response اومد تابع callback به یک صفی به اسم Callback queue اضافه میشه.
Event loop عضویه که هر لحظه چک میکنه که Call stack خالی هست یا نه. میتونین به اون بصورت یک ساعت نگاه کنید که هر لحظه و بصورت مداوم خالی بودن Call stack رو چک میکنه و هر زمان که خالی شد، به Callback queue نگاه میندازه و اگر چیزی در صف وجود داشته باشه اون رو میگیره و به Call stack اضافه میکنه تا اجرا بشه. اگر هم چیزی در Callback queue قرار نداشته باشه هم اتفاقی نمیوفته و Event loop به کار خودش ادامه میده.

برای جزئیات بیشتر میتونید درمورد نحوه کار جاوااسکریپت و Event loop و Call stack و Callback queue بیشتر مطالعه کنید.

@websaz
@sinashahoveisi
اين حالت چه ارتباطي با عمليات سرور دارد؟
وقتي ما يه ريكوئستي ميفرستيم سمت سرور اون كدهاي سمت سرور تعيين ميكنن كه چه جوابي رو كي بدن و چه ربطي به فرانت داره كه زمان براي نمايش مقادير سمت سرور مشخص كنه؟ مثلاً ميخوايم يكسري ويديو از يوتيوب ببينيم. در سمت فرانت وقتي سرچ ميكنيم اين سرچ ما فقط يك ريكوئست هست به سمت سرور و سمت سرور بقيه كار هارو هندل ميكنه كه از ديتابيس چي بگيره و به صورت جواب يا api بده سمت فرانت تا فقط سمت فرانت بگيره و نمايش بده.
بحث async await كه نميتونه براي عمليات بك اند زمان مشخص كنه؟!
سوال بعديم اينه كه تفاوت ارسال درخواست به روش async await و axios و fetch در چي هست؟
و axios و fetch نياز مارو براي نوشتن async await برطرف ميكنه؟
تشكر

دقیقا مشکل همینجاست آیا شما میتونید این اطمینان رو بدهید که هر درخواست یا حتی یک درخواست یکسان، تا رسیدن پاسخ به سمت فرانت یک زمان مشخص دارد؟ هیچ وقت نمیشه این اطمینان رو داد چون در این بین سرعت شبکه، شلوغی سرور و ... نقش دارند که به صورت متغیر در هر لحظه یک زمانی را میگیرند

بحث async و await زمان مشخص نمیکند بلکه میگوید من نمیدانم چقدر طول میکشه. پس بلاک نشو برو بقیه کارهایی رو که به نتیجه این درخواست واسبته نیست را انجام بده و وقتی پاسخ آمد حالا بیا و ادامه این کار را انجام بده

ببینید درخواست های async درخواستی است که زمان مشخصی ندارند و fetch و axios هم روش های ارسال درخواست به سمت سرور است (‌البته axios کتابخانه است که برای جاوااسکریپت نوشته شده و fetch درواقع جاوااسکریپت در اختیار ما قرار میده)
پس این دو کارهایی انجام میدهند که async هستند. شما میتوانید با axios یا fetch به دو طریق این async بودن را هندل کنید:
1) با استفاده از then و catch یا callBack function :

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

2)‌ با استفاده از async و await :

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

منبع
ببینید کارهای async در جاوااسکریپت ممکن است زیاد باشد مثل ارسال درخواست به سرور، setTimeout،‌ مثل خواندن از دیتابیس و مثل گرفتن یک تصویر از کاربر و ....

axios و fetch میایند و ارسال درخواست به سرور را انجام میدهند که یک کار زمانبر با زمان نامشخص است ( همیشه نامشخص است و به همین دلیل برای درخواست به سرور timeOut درنظر میگیرند یعنی اگر تا یک زمان مشخص پاسخ نیامد، پس درخواست ما failed‌شده است)
پس این درخواستها async هستند و برای فهمیدن آن به جاوااسکریپت از کلید async و await استفاده میکنیم.