शर्तों के आधार पर एसिंक्रोनस डिपेंडेंसी

टॉप-लेवल await, मॉड्यूल को एसिंक्रोनस फ़ंक्शन के तौर पर काम करने की अनुमति देता है. इसका मतलब है कि वे मॉड्यूल के एक्ज़ीक्यूशन को रोक सकते हैं, ताकि प्रॉमिस का इंतज़ार किया जा सके. यह तरीका, एसिंक्रोनस डिपेंडेंसी को शर्त के हिसाब से लोड करने के लिए काफ़ी मददगार है. जैसे, polyfill या भारी सेकंडरी लाइब्रेरी. इन्हें सिर्फ़ तब लोड किया जाता है, जब ब्राउज़र को इनकी ज़रूरत होती है.

टॉप-लेवल 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 ने WebKit के मॉड्यूल लोडर को ठीक किया है, ताकि स्पेसिफ़िकेशन के मुताबिक टॉप-लेवल await मॉड्यूल को एक साथ इंपोर्ट किया जा सके. हालांकि, Safari 15 से 26.6 वर्शन में, एक साथ कई मॉड्यूल से टॉप-लेवल await वाले मॉड्यूल को इंपोर्ट करने पर गड़बड़ी होती है. इस बारे में ज़्यादा जानने के लिए, MDN ब्राउज़र के साथ काम करने की सुविधा देखें.

इसके बजाय, अपने मॉड्यूल के स्ट्रक्चर के हिसाब से, इनमें से कोई एक पैटर्न चुनें:

1. सिंगल एंट्री मॉड्यूल (ऊपर main.js में दिखाया गया है): अगर आपका एंट्री मॉड्यूल, डिपेंडेंट इनिशलाइज़ेशन लॉजिक को सीधे तौर पर चलाता है, तो उस मॉड्यूल के सबसे ऊपर ./conditionally-load-polyfill.js को स्टैटिक तौर पर इंपोर्ट करें और उसके मुख्य हिस्से में अपना कोड चलाएं.
2. अलग-अलग ऐप्लिकेशन मॉड्यूल को बूटस्ट्रैप करना: अगर आपका एंट्री मॉड्यूल, डाउनस्ट्रीम ऐप्लिकेशन मॉड्यूल (जैसे, ./app.js) को डेलिगेट करता है, तो डाइनैमिक import() कॉल को टॉप-लेवल await के साथ चेन करें. इससे ./app.js को सिर्फ़ तब फ़ेच और इवैलुएट किया जाएगा, जब polyfill मॉड्यूल रिज़ॉल्व हो जाएगा:

// 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');

फ़ॉलबैक रणनीतियां

साल 2021 से, Chrome 89, Edge 89, Firefox 89, और Safari 15 जैसे मुख्य ब्राउज़र पर, बेसिक टॉप-लेवल await का इस्तेमाल किया जा सकता है. हालांकि, Safari 27 में ही इसे पूरी तरह से लागू किया गया है. इस बारे में ज़्यादा जानने के लिए, एमडीएन ब्राउज़र के साथ काम करने की सुविधा देखें.

• Safari 15–26.6: अगर आपने पिछले सेक्शन में बताए गए सिंगल-एंट्री-पॉइंट पैटर्न का पालन किया है, तो एक से ज़्यादा सिबलिंग मॉड्यूल, टॉप-लेवल await मॉड्यूल को एक साथ इंपोर्ट नहीं करते. ऐसे में, बिना किसी अतिरिक्त फ़ॉलबैक के, टॉप-लेवल await पर सुरक्षित तरीके से भरोसा किया जा सकता है.
• लेगसी ब्राउज़र (2021 से पहले के): अगर आपके ऐप्लिकेशन को ऐसे ब्राउज़र के साथ काम करना है जिनमें टॉप-लेवल await की सुविधा नहीं है, तो टॉप-लेवल await का इस्तेमाल करने से बचें. साथ ही, अपने कंडिशनल import() ऑर्केस्ट्रेशन को स्टैंडर्ड async फ़ंक्शन या .then() प्रॉमिस चेन में रैप करें.