async , await , Promise به زبان خیلی ساده

توی خیلی از اپ های جاوا اسکریپت async , await , Promise میبینیم

اینجا میخوایم خیلی ساده بگیم که اینا چطوری کار میکنن

مشاهده این آموزش توی یوتوب : https://www.youtube.com/watch?v=mpYUof-FUB4 (۸:۵۶ دقیقه)

مشاهده نمونه ی زنده ی این آموزش توی استکبلیتز

شروع:

تصور کنید یه تابع داریم اینجوری

function sayMyName() {
 console.log(&quotbehnam&quot);
}

خب واضحه که وقتی اجراش کنیم چکار میکنه ! کلمه behnam توی کنسول نمایش داده میشه

حالا بیاین اینجوریش کنیم

function myName() {
 return  &quotbehnam&quot
}
function sayMyName() {
  console.log(myName()); 
}

خب اینم که معلومه دقیقا همون کار قبلیو میکنه با این تفاوت که behnam از تابع myName گرفته میشه

خب حالا تصور کنید که تابع myName قراره اطلاعاتو با تاخیر به ما برگردونه مثلا همچین چیزی :

function myName() {  
setTimeout(() => {
    return  &quotbehnam&quot 
 },2000);
}

خب همچین چیزی توی جاوا اسکریپت نداریم که تابع با تاخیر چیزی return کنه !

برای این کار باید قسمتی که با تاخیر اجرا میشه توی Promise بذاریم و ریترن کردنشو به عهده ی پرامیس بذاریم و پرامیسو ریترن کنیم یعنی اینجوری :

function myName() {
  return new Promise(function (resolve) {
    setTimeout(() => {
    resolve('behnam');
    }, 2000);
  });
}

دقت کنید که توی پرامیس بجای ریترن کردن باید تابعمونو با مقدار دلخواهمون صدا بزنیم که اینجا اسم این تابع resolve که میتونید هر اسمی بذارید براش

اما myName الان Promise برمیگردونه نه behnam پس باید چکار کنیم ؟

اینجاس که باید با await مقدارشو بیرون بکشیم یعنی اینجوری :

console.log(await myName());

اما این await فقط اجازه داره توی توابعی باشه که اولشون async باشن !

یعنی اینجوری :

async function sayMyName() {
    console.log(await myName());
}

دلیلشم اینه که به جاوا اسکریپت بگه که این قطعه کد تابع باید حتما به ترتیبی که ما میگیم اجرا بشه !

در آخر همچین چیزی داریم :

function myName() {
   return new Promise(function (resolve) {
        setTimeout(() => {
        resolve('behnam');
    }, 2000);
    });
}
async function sayMyName() {
 console.log(await myName());
}