معرفی مفهوم Top Level Await در ES2020

معرفی top level await

زمانی که برای بار نخست async/await معرفی شد، استفاده از await خارج از یک async function باعث ایجاد خطا می‌شد. از این رو زمانی که برنامه‌نویس‌ها نیاز داشتند که از دستور await استفاده کنند اما این دستور درون یک async function نبود، از الگوی immediately-invoked async function expressions یا IIAFE استفاده می‌کردند.  در ES2020 ویژگی جدید به اسم top level await معرفی شد که به شما اجازه می‌دهد از دستور await خارج از یک async function استفاده کنید. در این حالت ماژول همانند یک async function عمل می‌کند. فرض کنید دو ماژول A , B داریم، که از ویژگی top level await در ماژول A استفاده کرده‌ایم و در ماژول B، ماژول A را import می‌کنیم. در این حالت ماژول B منتظر می‌ماند تا ماژول  A به طور کامل load شود سپس به ادامه‌ی تفسیر کدهای خودش می‌پردازد.  این ویژگی در بسیاری از جهات کد را تمیزتر و خواناتر می‌کند. بهتر است که کاربرد این ویژگی را با ذکر یک مثال و هنگام کار با ماژول‌ها بررسی کنیم.

ذکر مسئله برای درک کاربرد ویژگی top level await

بیان مسئله

ما در این مطلب با استفاده از یک مثال کاربرد و مزیت top level await را شرح می‌دهیم. برای ادامه‌ی کار فرض کنید که قصد داریم اطلاعات کاربران را از یک API دریافت کنیم و آنها را در یک لیست در صفحه‌ی HTML نشان دهیم. برای این کار ۳ فایل به نام‌های  index.html, app.mjs و user.mjs را ایجاد می‌کنیم. کار هر کدام از این فایل‌های به شرح زیر می‌باشند:

• فایل index.html که یک فایل HTML است و از آن برای نوشتن کد‌های HTML مربوط به نمایش اطلاعات کاربران استفاده می‌کنیم و در قسمت script این فایل، فایل app.mjs را فراخوانی می‌کنیم.
• فایل user.mjs که اطلاعات کاربران را از یک API دریافت می‌کند.
• و فایل app.mjs که ماژول user.mjs را import می‌کند و اطلاعات کاربران را توسط جاوا اسکریپت در فایل index.html وارد می‌کند.

ادامه‌ی این مطلب را می‌توانید در پست معرفی مفهوم Top Level Await در ES2020 مطالعه فرمایید.