টপ-লেভেল await মডিউলকে অ্যাসিঙ্ক্রোনাস ফাংশন হিসেবে কাজ করার অনুমতি দেয়, যার অর্থ হল প্রমিজের জন্য অপেক্ষা করতে তারা মডিউল এক্সিকিউশন পজ করতে পারে। এটি শর্তসাপেক্ষে অ্যাসিঙ্ক ডিপেন্ডেন্সি লোড করার জন্য অত্যন্ত উপযোগী—যেমন পলিফিল বা ভারী সেকেন্ডারি লাইব্রেরি—শুধুমাত্র ব্রাউজারের প্রয়োজন হলে।
টপ-লেভেল অ্যাওয়েট ব্যবহার করে, আপনি একটি মডিউলের মধ্যে কন্ডিশনাল লোডিং লজিক এনক্যাপসুলেট করতে পারেন, যা ডিপেন্ডেন্সি সম্পূর্ণভাবে লোড এবং প্রস্তুত না হওয়া পর্যন্ত ডাউনস্ট্রিম কনজিউমার মডিউলগুলিকে কার্যকরভাবে এক্সিকিউট হতে বাধা দেয়।
কন্ডিশনাল পলিফিল প্যাটার্ন
টপ-লেভেল await ব্যবহার করে শর্তসাপেক্ষে যেকোনও অ্যাসিঙ্ক ডিপেন্ডেন্সি লোড করা যায় যা একটি মডিউল, শর্তসাপেক্ষে ডিপেন্ডেন্সি লোডিং প্যাটার্নের একটি ভালো ব্যবহার হল শর্তসাপেক্ষে ব্রাউজারের জন্য পলিফিল লোড করা যা নির্দিষ্ট ফিচারকে সাপোর্ট করে না। এই পদ্ধতিটি ফিচার শনাক্তকরণ এবং ডাইনামিক ইমপোর্টকে একটি একক ডিপেন্ডেন্সি মডিউলের মধ্যে এনক্যাপসুলেট করে।
নিম্নলিখিত ক্ষেত্রে, popover অ্যাট্রিবিউট পলিফিল শর্তসাপেক্ষে লোড করা হয় যদি এটি HTMLElement.prototype-এ উপস্থিত না থাকে:
// conditionally-load-polyfill.js
// Check if the feature is missing before doing work.
// MANDATORY: Prefer checking HTMLElement.prototype over window or document
// when checking for a global DOM attribute or property like popover.
if (!('popover' in HTMLElement.prototype)) {
// Use top-level await to pause the execution of any module that imports this file
// until the polyfill finishes downloading and executing.
await import('/path/to/popover-polyfill.js');
}
// Export a marker if needed by your application
export const polyfillLoaded = true;
// main.js
// MANDATORY: Because conditionally-load-polyfill.js uses top-level await,
// this import will block execution of main.js until the polyfill is ready.
import './conditionally-load-polyfill.js';
// Now it is safe to use the feature (e.g., showing a popover)
const myPopover = document.getElementById('my-popover');
if (myPopover) {
myPopover.showPopover();
}
মডিউল ইমপোর্ট সিকোয়েন্স করা এবং Safari 27-এর আগের ভার্সনের বাগ এড়ানো
বাধ্যতামূলক: আপনাকে অবশ্যই আপনার মডিউল গ্রাফটি এমনভাবে গঠন করতে হবে যাতে টপ-লেভেল await মডিউলটি একটি একক এন্ট্রি পয়েন্ট থেকে ইম্পোর্ট করা হয় এবং ডাউনস্ট্রিম মডিউলগুলি মূল্যায়ন করার আগে সম্পূর্ণ হয়:
- এন্ট্রি ফাইলে সিবলিং স্ট্যাটিক ইমপোর্ট রাখবেন না (যেমন,
import './conditionally-load-polyfill.js'; import './app.js';)। ECMAScript মডিউল মূল্যায়ন স্পেসিফিকেশন অনুযায়ী, টপ-লেভেলawaitশুধুমাত্র পেরেন্ট মডিউলকে সাসপেন্ড করে যা এটিকে ইমপোর্ট করে—সিবলিং স্ট্যাটিক ইমপোর্টকে নয়—তাই পলিফিল লোড হওয়া শেষ হওয়ার আগে./app.jsসব ব্রাউজারে একই সাথে মূল্যায়ন করবে। - একই সাথে একাধিক সিবলিং মডিউল থেকে টপ-লেভেল
awaitমডিউল ইমপোর্ট করবেন না (যেমন,a.jsএবংb.jsউভয়ই স্ট্যাটিক্যালি./conditionally-load-polyfill.jsইমপোর্ট করছে)। যদিও Safari 27 স্পেক অনুযায়ী টপ-লেভেলawaitমডিউলের কনকারেন্ট ইমপোর্ট সাপোর্ট করার জন্য WebKit-এর মডিউল লোডার ঠিক করেছে, Safari 15–26.6 ব্যর্থ হয় যখন একাধিক মডিউল একই সাথে টপ-লেভেলawaitথাকা একটি মডিউল ইমপোর্ট করে (MDN ব্রাউজার কম্প্যাটিবিলিটি দেখুন)।
পরিবর্তে, আপনার মডিউল স্ট্রাকচারের উপর নির্ভর করে দুটি প্যাটার্নের মধ্যে একটি বেছে নিন:
- সিঙ্গেল এন্ট্রি মডিউল (উপরে
main.js-এ দেখানো হয়েছে): আপনার এন্ট্রি মডিউল যদি সরাসরি ডিপেন্ডেন্ট ইনিশিয়ালাইজেশন লজিক রান করে, তাহলে সেই মডিউলের সবচেয়ে উপরে স্ট্যাটিক্যালি./conditionally-load-polyfill.jsইমপোর্ট করুন এবং এর বডিতে আপনার কোড রান করুন। - আলাদা অ্যাপ্লিকেশন মডিউল বুটস্ট্র্যাপ করা: আপনার এন্ট্রি মডিউল ডাউনস্ট্রিম অ্যাপ্লিকেশন মডিউলে (যেমন
./app.js) ডেলিগেট করলে, টপ-লেভেলawait-এর সাথে চেইন ডায়নামিকimport()কল করুন যাতে পলিফিল মডিউল সমাধান হওয়ার পরেই শুধু./app.jsফেচ ও মূল্যায়ন করা হয়:
// main.js
// MANDATORY: Chain dynamic imports with top-level await when bootstrapping separate
// application modules so './app.js' waits for the polyfill to finish loading.
// DO NOT use sibling static imports (`import './conditionally-load-polyfill.js'; import './app.js';`),
// which evaluate concurrently and execute './app.js' before the polyfill is ready.
await import('./conditionally-load-polyfill.js');
await import('./app.js');
ফলব্যাক স্ট্র্যাটেজি
২০২১ সাল থেকে (Chrome 89, Edge 89, Firefox 89, এবং Safari 15) প্রধান ব্রাউজার জুড়ে বেসিক টপ-লেভেল await কাজ করলেও, এটি শুধুমাত্র Safari 27-এ সম্পূর্ণ স্পেসিফিকেশন মেনে চলে (MDN ব্রাউজার কম্প্যাটিবিলিটি দেখুন)।
- Safari 15–26.6: আপনি আগের বিভাগে উল্লেখ করা সিঙ্গল-এন্ট্রি-পয়েন্ট প্যাটার্ন অনুসরণ করলে, একাধিক সিবলিং মডিউল একই সাথে টপ-লেভেল
awaitমডিউল ইমপোর্ট করে না। তাই, আপনি অতিরিক্ত ফলব্যাক ছাড়াই নিরাপদে টপ-লেভেলawait-এর উপর নির্ভর করতে পারেন। - পুরনো ব্রাউজার (২০২১-এর আগের): আপনার অ্যাপ্লিকেশনকে যদি এমন ব্রাউজার সাপোর্ট করতে হয় যাতে কোনও টপ-লেভেল
awaitসাপোর্ট নেই, তাহলে টপ-লেভেলawaitএড়িয়ে চলুন এবং আপনার কন্ডিশনালimport()অর্কেস্ট্রেশনকে স্ট্যান্ডার্ডasyncফাংশন বা.then()প্রমিস চেনে র্যাপ করুন।