await/async چی هستن؟

اول باید بدونیم عملیات ناهمگام چی هستن. عملیات ناهمگام به عملیاتی گفته میشه که جدا از روند اصلی برنامه اجرا میشن. یعنی برنامه منتظر تموم شدن اونها نمی‌مونه و به کار خودش ادامه میده. مثلا اتصال به یک منبع خارجی با Ajax. توی جاوا اسکریپت برای مدیریت کردن عملیات ناهمگام راه‌های مختلفی وجود داره. مثل کال‌بک فانکشن‌ها، پرامیس‌ها و Async/await.

Async/await یک راه حل برای مدیریت کردن عملیات ناهمگام هست که خیلی راحت‌تر، خواناتر و بهتر از روش‌های دیگه هست. بهتره که بدونیم Async/await توی پشت پرده خودش از پرامیس استفاده می‌کنه. با پرامیس‌ها توی این مقاله آشنا بشید.

فرض کنیم با تابع fetch می‌خوایم یه سری اطلاعات رو از یک منبع خارجی دریافت و پردازش کنیم. اگه با پرامیس‌ها بنویسیم کد ما به صورت زیر خواهد بود:

function callApi() {
    return fetch("url/to/api/endpoint")
        .then(resp => resp.json())
        .then(data => {
            // do something
        }).catch(err => {
            // error
        });
}

و اگه با Async/await بنویسیم بصورت زیر:

async function callApi() {
  try {
    const resp = await fetch("url/to/api/endpoint");
    const data = await resp.json();
    //do something
  } catch (e) {
    // 
  }
}

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

async function api() {
    return "I'm Api";
}

api().then(alert);

و یک کلمه کلیدی دیگه داریم به اسم await. این کلمه کلیدی فقط توی توابعی استفاده میشه که کلمه async اول اونها قرار داشته باشه. از await پشت یک عملیات ناهمگام که یک پرامیس هست استفاده میشه و باعث میشه تا ادامه‌ی برنامه صبر کنه تا این پرامیس resolve بشه. مثال زیر رو ببینید:

function externalCall() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('done')
        }, 2000);
    });
}


async function getApi() {
    let result = await externalCall();
    console.log(result);
}

getApi();

تابع externalCall مثلا قراره یک کاری انجام بده که ۲ ثانیه زمان میبره. این تابع رو توی تابع getApi استفاده کردیم و قبل از اون از کلمه کلیدی await هم استفاده کردیم. با این کار، خط ۱۲ تا زمانی که کار خط ۱۱ تموم نشده، اجرا نخواهد شد.

برخلاف پرامیس‌ها که باعث به‌وجود اومدن متدهای زنجیره‌ای و کدهای تو در تو میشن، استفاده از Async/await باعث میشه کدهای ساده‌تر، خواناتر و مسطح‌تری داشته باشیم و همچنین خطایابی توی کدها ما راحت‌تر میشه. توضیح کامل و اختصاصی async/await در جاوااسکریپت

منبع: