Top-level Await در جاوا اسکریپت: انقلابی در بارگذاری ماژول و مقداردهی اولیه ناهمزمان

سال‌هاست که توسعه‌دهندگان جاوا اسکریپت با پیچیدگی‌های ناهمزمانی دست و پنجه نرم می‌کنند. در حالی که سینتکس async/await وضوح قابل توجهی را برای نوشتن منطق ناهمزمان درون توابع به ارمغان آورد، یک محدودیت بزرگ باقی مانده بود: سطح بالای یک ماژول ES (ES module) کاملاً همزمان (synchronous) بود. این موضوع توسعه‌دهندگان را مجبور می‌کرد تا برای انجام یک کار ناهمزمان ساده در هنگام راه‌اندازی ماژول، از الگوهای نامأنوسی مانند IIAFE (Immediately Invoked Async Function Expressions) یا اکسپورت کردن پرامیس‌ها (promises) استفاده کنند. نتیجه اغلب کدهای تکراری بود که خواندن و درک منطق آن دشوار بود.

اینجاست که Top-level Await (TLA) وارد می‌شود؛ قابلیتی که در ECMAScript 2022 نهایی شد و اساساً نحوه تفکر و ساختار ماژول‌های ما را تغییر می‌دهد. این ویژگی به شما اجازه می‌دهد از کلمه کلیدی await در سطح بالای ماژول‌های ES خود استفاده کنید و عملاً فاز مقداردهی اولیه ماژول خود را به یک تابع async تبدیل کنید. این تغییر به ظاهر کوچک، پیامدهای عمیقی برای بارگذاری ماژول، مدیریت وابستگی‌ها و نوشتن کدهای ناهمزمان خواناتر و قابل فهم‌تر دارد.

در این راهنمای جامع، به دنیای Top-level Await عمیقاً خواهیم پرداخت. ما مشکلاتی که این ویژگی حل می‌کند، نحوه عملکرد آن، قدرتمندترین موارد استفاده و بهترین شیوه‌ها برای بهره‌برداری مؤثر از آن بدون به خطر انداختن عملکرد را بررسی خواهیم کرد.

چالش: ناهمزمانی در سطح ماژول

برای درک کامل Top-level Await، ابتدا باید مشکلی را که حل می‌کند، بفهمیم. هدف اصلی یک ماژول ES، اعلام وابستگی‌های خود (import) و ارائه API عمومی خود (export) است. کدی که در سطح بالای یک ماژول قرار دارد، تنها یک بار و هنگام اولین ایمپورت ماژول اجرا می‌شود. محدودیت این بود که این اجرا باید به صورت همزمان انجام می‌شد.

اما اگر ماژول شما نیاز داشته باشد قبل از اینکه بتواند مقادیر خود را اکسپورت کند، داده‌های پیکربندی را واکشی کند، به پایگاه داده متصل شود یا یک ماژول WebAssembly را مقداردهی اولیه کند، چه؟ قبل از TLA، باید به راه‌حل‌های جایگزین متوسل می‌شدید.

راه‌حل جایگزین IIAFE (Immediately Invoked Async Function Expression)

یک الگوی رایج، قرار دادن منطق ناهمزمان در یک IIAFE از نوع async بود. این کار به شما اجازه می‌داد از await استفاده کنید، اما مجموعه جدیدی از مشکلات را ایجاد می‌کرد. این مثال را در نظر بگیرید که در آن یک ماژول باید تنظیمات پیکربندی را واکشی کند:

config.js (روش قدیمی با IIAFE)

            
export const settings = {};

(async () => {
  try {
    const response = await fetch('https://api.example.com/config');
    const configData = await response.json();
    Object.assign(settings, configData);
  } catch (error) {
    console.error("Failed to load configuration:", error);
    // Assign default settings on failure
    Object.assign(settings, { default: true });
  }
})();

            

              
                Copy
              
            
          

مشکل اصلی در اینجا یک «شرایط رقابتی» (race condition) است. ماژول config.js اجرا شده و بلافاصله یک شیء settings خالی را اکسپورت می‌کند. ماژول‌های دیگری که config را ایمپورت می‌کنند، فوراً این شیء خالی را دریافت می‌کنند، در حالی که عملیات fetch در پس‌زمینه در حال انجام است. آن ماژول‌ها هیچ راهی برای دانستن اینکه شیء settings چه زمانی واقعاً پر خواهد شد، ندارند، که منجر به مدیریت وضعیت پیچیده، استفاده از event emitter ها یا مکانیزم‌های نظرسنجی (polling) برای منتظر ماندن برای داده‌ها می‌شود.

الگوی «اکسپورت کردن یک پرامیس»

رویکرد دیگر، اکسپورت کردن یک پرامیس بود که با اکسپورت‌های مورد نظر ماژول، resolve می‌شود. این روش قوی‌تر است زیرا مصرف‌کننده را مجبور به مدیریت ناهمزمانی می‌کند، اما بار مسئولیت را به دوش او منتقل می‌کند.

config.js (اکسپورت کردن یک پرامیس)

            
const setupPromise = (async () => {
  const response = await fetch('https://api.example.com/config');
  return response.json();
})();

export { setupPromise };

            

              
                Copy
              
            
          

main.js (مصرف کردن پرامیس)

            
import { setupPromise } from './config.js';

setupPromise.then(config => {
  console.log('API Key:', config.apiKey);
  // ... start the application
});

            

              
                Copy
              
            
          

اکنون هر ماژولی که به پیکربندی نیاز دارد، باید پرامیس را ایمپورت کرده و قبل از دسترسی به داده‌های واقعی، از .then() استفاده کند یا آن را await کند. این کار پرحرف، تکراری و مستعد فراموشی است و منجر به خطاهای زمان اجرا می‌شود.

ورود Top-level Await: یک تغییر پارادایم

Top-level Await با اجازه دادن به استفاده مستقیم از await در محدوده ماژول، این مشکلات را به زیبایی حل می‌کند. در اینجا نحوه ظاهر شدن مثال قبلی با TLA آمده است:

config.js (روش جدید با TLA)

            
const response = await fetch('https://api.example.com/config');
const config = await response.json();

export default config;

            

              
                Copy
              
            
          

main.js (تمیز و ساده)

            
import config from './config.js';

// This code only runs after config.js has fully loaded.
console.log('API Key:', config.apiKey);

            

              
                Copy
              
            
          

این کد تمیز، قابل فهم و دقیقاً همان کاری را که انتظار دارید انجام می‌دهد. کلمه کلیدی await اجرای ماژول config.js را تا زمانی که پرامیس‌های fetch و .json() برطرف (resolve) شوند، متوقف می‌کند. نکته مهم این است که هر ماژول دیگری که config.js را ایمپورت می‌کند نیز اجرای خود را تا زمان مقداردهی کامل config.js متوقف خواهد کرد. نمودار ماژول عملاً «منتظر» می‌ماند تا وابستگی ناهمزمان آماده شود.

نکته مهم: این ویژگی فقط در ماژول‌های ES (ES Modules) در دسترس است. در مرورگر، این به این معنی است که تگ اسکریپت شما باید شامل type="module" باشد. در Node.js، باید یا از پسوند فایل .mjs استفاده کنید یا "type": "module" را در فایل package.json خود تنظیم کنید.

چگونه Top-level Await بارگذاری ماژول را متحول می‌کند

TLA فقط یک شیرینی سینتکسی (syntactic sugar) نیست؛ بلکه به طور اساسی با مشخصات بارگذاری ماژول ES ادغام می‌شود. وقتی یک موتور جاوا اسکریپت با ماژولی حاوی TLA مواجه می‌شود، جریان اجرای خود را تغییر می‌دهد.

در اینجا خلاصه‌ای از فرآیند آمده است:

• تجزیه و ساخت نمودار: موتور ابتدا تمام ماژول‌ها را از نقطه شروع تجزیه می‌کند تا وابستگی‌ها را از طریق دستورات import شناسایی کند. این کار یک نمودار وابستگی را بدون اجرای هیچ کدی می‌سازد.
• اجرا: موتور شروع به اجرای ماژول‌ها با پیمایش پس‌ترتیبی (post-order traversal) می‌کند (وابستگی‌ها قبل از ماژول‌هایی که به آنها وابسته هستند، اجرا می‌شوند).
• توقف در Await: هنگامی که موتور ماژولی را اجرا می‌کند که حاوی یک await در سطح بالا است، اجرای آن ماژول و تمام ماژول‌های والد آن در نمودار را متوقف می‌کند.
• مسدود نشدن حلقه رویداد (Event Loop): این توقف غیرمسدودکننده (non-blocking) است. موتور آزاد است تا به اجرای وظایف دیگر در حلقه رویداد، مانند پاسخ به ورودی کاربر یا رسیدگی به سایر درخواست‌های شبکه، ادامه دهد. این بارگذاری ماژول است که مسدود می‌شود، نه کل برنامه.
• از سرگیری اجرا: هنگامی که پرامیس منتظر مانده (awaited) به نتیجه می‌رسد (resolve یا reject می‌شود)، موتور اجرای آن ماژول و متعاقباً ماژول‌های والدی که منتظر آن بودند را از سر می‌گیرد.

این هماهنگی تضمین می‌کند که تا زمان اجرای کد یک ماژول، تمام وابستگی‌های ایمپورت شده آن - حتی موارد ناهمزمان - به طور کامل مقداردهی اولیه شده و آماده استفاده هستند.

موارد استفاده عملی و مثال‌های دنیای واقعی

Top-level Await در را برای راه‌حل‌های تمیزتر برای انواع سناریوهای رایج توسعه باز می‌کند.

۱. بارگذاری پویا ماژول و جایگزین‌های وابستگی (Dependency Fallbacks)

گاهی اوقات شما نیاز دارید یک ماژول را از یک منبع خارجی مانند یک CDN بارگذاری کنید، اما می‌خواهید در صورت خرابی شبکه، یک جایگزین محلی داشته باشید. TLA این کار را بسیار ساده می‌کند.

            
// utils/date-library.js
let moment;

try {
  // Attempt to import from a CDN
  moment = await import('https://cdn.skypack.dev/moment');
} catch (error) {
  console.warn('CDN failed, loading local fallback for moment.js');
  // If it fails, load a local copy
  moment = await import('./vendor/moment.js');
}

export default moment.default;

            

              
                Copy
              
            
          

در اینجا، ما سعی می‌کنیم یک کتابخانه را از یک CDN بارگذاری کنیم. اگر پرامیس import() پویا رد (reject) شود (به دلیل خطای شبکه، مشکل CORS و غیره)، بلوک catch به آرامی یک نسخه محلی را به جای آن بارگذاری می‌کند. ماژول اکسپورت شده تنها پس از اینکه یکی از این مسیرها با موفقیت به پایان برسد، در دسترس خواهد بود.

۲. مقداردهی اولیه ناهمزمان منابع

این یکی از رایج‌ترین و قدرتمندترین موارد استفاده است. یک ماژول اکنون می‌تواند راه‌اندازی ناهمزمان خود را به طور کامل کپسوله کرده و پیچیدگی را از مصرف‌کنندگان خود پنهان کند. یک ماژول مسئول اتصال به پایگاه داده را تصور کنید:

            
// services/database.js
import { createPool } from 'mysql2/promise';

const connectionPool = await createPool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  database: 'my_app_db',
  waitForConnections: true,
  connectionLimit: 10,
});

// The rest of the application can use this function
// without worrying about the connection state.
export async function query(sql, params) {
  const [results] = await connectionPool.execute(sql, params);
  return results;
}

            

              
                Copy
              
            
          

اکنون هر ماژول دیگری می‌تواند به سادگی import { query } from './database.js' را انجام داده و از تابع استفاده کند، با اطمینان از اینکه اتصال پایگاه داده قبلاً برقرار شده است.

۳. بارگذاری شرطی ماژول و بین‌المللی‌سازی (i18n)

شما می‌توانید از TLA برای بارگذاری ماژول‌ها به صورت شرطی بر اساس محیط یا ترجیحات کاربر استفاده کنید، که ممکن است نیاز به واکشی ناهمزمان داشته باشند. یک مثال عالی، بارگذاری فایل زبان صحیح برای بین‌المللی‌سازی است.

            
// i18n/translator.js
async function getUserLanguage() {
  // In a real app, this could be an API call or from local storage
  return new Promise(resolve => resolve('es')); // Example: Spanish
}

const lang = await getUserLanguage();
const translations = await import(`./locales/${lang}.json`);

export function t(key) {
  return translations[key] || key;
}

            

              
                Copy
              
            
          

این ماژول تنظیمات کاربر را واکشی می‌کند، زبان ترجیحی را تعیین می‌کند و سپس فایل ترجمه مربوطه را به صورت پویا ایمپورت می‌کند. تضمین می‌شود که تابع t اکسپورت شده از لحظه ایمپورت شدن با زبان صحیح آماده باشد.

بهترین شیوه‌ها و دام‌های بالقوه

در حالی که Top-level Await قدرتمند است، باید با احتیاط از آن استفاده شود. در اینجا چند دستورالعمل برای پیروی وجود دارد.

انجام دهید: برای مقداردهی اولیه ضروری و مسدودکننده استفاده کنید

TLA برای منابع حیاتی که برنامه یا ماژول شما بدون آنها نمی‌تواند کار کند، مانند پیکربندی، اتصالات پایگاه داده یا پلی‌فیل‌های (polyfill) ضروری، عالی است. اگر بقیه کد ماژول شما به نتیجه یک عملیات ناهمزمان بستگی دارد، TLA ابزار مناسبی است.

انجام ندهید: برای کارهای غیرحیاتی بیش از حد از آن استفاده کنید

استفاده از TLA برای هر کار ناهمزمان می‌تواند گلوگاه‌های عملکردی ایجاد کند. از آنجایی که اجرای ماژول‌های وابسته را مسدود می‌کند، می‌تواند زمان راه‌اندازی برنامه شما را افزایش دهد. برای محتوای غیرحیاتی مانند بارگذاری یک ویجت رسانه اجتماعی یا واکشی داده‌های ثانویه، بهتر است تابعی را اکسپورت کنید که یک پرامیس را برمی‌گرداند، و به برنامه اصلی اجازه می‌دهد ابتدا بارگذاری شود و این وظایف را به صورت تنبل (lazily) مدیریت کند.

انجام دهید: خطاها را به درستی مدیریت کنید

یک رد شدن (rejection) پرامیس مدیریت نشده در یک ماژول با TLA، از بارگذاری موفقیت‌آمیز آن ماژول برای همیشه جلوگیری می‌کند. خطا به دستور import منتشر می‌شود که آن نیز رد خواهد شد. این می‌تواند راه‌اندازی برنامه شما را متوقف کند. از بلوک‌های try...catch برای عملیاتی که ممکن است با شکست مواجه شوند (مانند درخواست‌های شبکه) برای پیاده‌سازی جایگزین‌ها یا حالت‌های پیش‌فرض استفاده کنید.

به عملکرد و موازی‌سازی توجه داشته باشید

اگر ماژول شما نیاز به انجام چندین عملیات ناهمزمان مستقل دارد، آنها را به صورت متوالی await نکنید. این کار یک آبشار (waterfall) غیرضروری ایجاد می‌کند. به جای آن، از Promise.all() برای اجرای آنها به صورت موازی و await کردن نتیجه استفاده کنید.

            
// services/initial-data.js

// BAD: Sequential requests
// const user = await fetch('/api/user').then(res => res.json());
// const permissions = await fetch('/api/permissions').then(res => res.json());

// GOOD: Parallel requests
const [user, permissions] = await Promise.all([
  fetch('/api/user').then(res => res.json()),
  fetch('/api/permissions').then(res => res.json()),
]);

export { user, permissions };

            

              
                Copy
              
            
          

این رویکرد تضمین می‌کند که شما فقط منتظر طولانی‌ترین درخواست از بین دو درخواست می‌مانید، نه مجموع هر دو، که به طور قابل توجهی سرعت مقداردهی اولیه را بهبود می‌بخشد.

از TLA در وابستگی‌های چرخه‌ای اجتناب کنید

وابستگی‌های چرخه‌ای (جایی که ماژول `A` ماژول `B` را ایمپورت می‌کند، و `B` ماژول `A` را ایمپورت می‌کند) خودشان یک بوی بد کد (code smell) هستند، اما می‌توانند با TLA باعث بن‌بست (deadlock) شوند. اگر هر دو `A` و `B` از TLA استفاده کنند، سیستم بارگذاری ماژول می‌تواند گیر کند، در حالی که هر کدام منتظر پایان عملیات ناهمزمان دیگری است. بهترین راه‌حل، بازسازی (refactor) کد برای حذف وابستگی چرخه‌ای است.

پشتیبانی محیط و ابزارها

Top-level Await اکنون به طور گسترده در اکوسیستم مدرن جاوا اسکریپت پشتیبانی می‌شود.

• Node.js: از نسخه 14.8.0 به طور کامل پشتیبانی می‌شود. شما باید در حالت ماژول ES اجرا کنید (از فایل‌های .mjs استفاده کنید یا "type": "module" را به package.json خود اضافه کنید).
• مرورگرها: در تمام مرورگرهای مدرن اصلی پشتیبانی می‌شود: کروم (از نسخه 89)، فایرفاکس (از نسخه 89) و سافاری (از نسخه 15). شما باید از <script type="module"> استفاده کنید.
• باندلرها: باندلرهای مدرن مانند Vite، Webpack 5+ و Rollup پشتیبانی بسیار خوبی از TLA دارند. آنها می‌توانند ماژول‌هایی که از این ویژگی استفاده می‌کنند را به درستی باندل کنند و اطمینان حاصل کنند که حتی هنگام هدف قرار دادن محیط‌های قدیمی‌تر نیز کار می‌کند.

نتیجه‌گیری: آینده‌ای تمیزتر برای جاوا اسکریپت ناهمزمان

Top-level Await چیزی فراتر از یک راحتی است؛ این یک بهبود اساسی در سیستم ماژول جاوا اسکریپت است. این ویژگی یک شکاف دیرینه در قابلیت‌های ناهمزمان زبان را پر می‌کند و امکان مقداردهی اولیه ماژول را به شیوه‌ای تمیزتر، خواناتر و قوی‌تر فراهم می‌کند.

TLA با قادر ساختن ماژول‌ها به اینکه واقعاً مستقل باشند و راه‌اندازی ناهمزمان خود را بدون افشای جزئیات پیاده‌سازی یا تحمیل کدهای تکراری به مصرف‌کنندگان مدیریت کنند، معماری بهتر و کد قابل نگهداری‌تری را ترویج می‌کند. این ویژگی همه چیز را از واکشی پیکربندی‌ها و اتصال به پایگاه‌های داده گرفته تا بارگذاری پویا کد و بین‌المللی‌سازی ساده می‌کند. همانطور که برنامه مدرن جاوا اسکریپت بعدی خود را می‌سازید، در نظر بگیرید که Top-level Await کجا می‌تواند به شما در نوشتن کدهای زیباتر و مؤثرتر کمک کند.