چرا نباید در لوپ await وجود داشته باشد

یکی از اشتباهاتی که معمولا هر تازه‌کاری در مواجهه با زبان جاواسکریپت انجام می‌ده. استفاده نابجا از await توی لوپ هستش. این اشتباه یعنی چی؟

const list: number[] = [1,2,3,4,5];
list.map(async (i): Promise<void> => {
    await someAsyncFunction(i);
});

احتمالا خیلیا (خود من تا یک ماه پیش!) این اشتباه رو می‌کردم. فرض کنید که این تابع someAsyncFunction توی مثال بالا قراره ۳۰۰ میلی ثانیه زمان صرف کنه تا محاسبتاش رو انجام بده! (آره خیلی کار خاصی با یه ورودی اینتجر می‌کنه?).

خب با این زمانی که قراره صرف کنه کل این لوپ ۱.۵ ثانیه زمان برای انجامش کد شما/کاربر شما/ خط بعدی کد شما و ... غیره باید خیره با آفاق مغربی بمونه تا جواب برگرده.

اما راه حل بهتر شدن بازدهی

کد بالا با یه تغییر کوچیک می‌تونه به شدت توی پرفورمنس و بازدهی تغییر ایجاد کنه:

async someAsyncFunction(i: number) : Promise<void> {
    ... ANJAME YE KARE ZAMANBAR...
}

const list: number[] = [1,2,3,4,5];
const queries: Promise<void[]> = [];
list.map(i => queries.push(someAsyncFunction(i)));

await Promise.all(queries);

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

این‌جوری شاید یکم بیشتر از زمان مورد نیاز برای یک بار انجام شدن این محاسبه زمان نیاز داشته باشین! یعنی همون ۳۰۰ میلی ثانیه!

یه راه دیگه هم برای نوشتن همون مثال بالا هست:

async someAsyncFunction(i: number) : Promise<void> {
     ... ANJAME YE KARE ZAMANBAR...
}

const list: number[] = [1,2,3,4,5]; 
await Promise.all(list.map(i => someAsyncFunction(i)));

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

await Promise.all(queries);

رو بذاریم آخر متدمون اجرا بشه. به این تکنیک می‌گن Concurrent programming.

امیدوارم براتون مفید بوده باشه و اگر چیز دیگه‌ای به ذهنتون می‌رسه که من ننوشتم خوشحال می‌شم برام بنویسید?