Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Use await directly in modules without wrapping in an async function! No more IIFE wrappers - just use await at the top level of your ES modules!
// module.js
let userData;
(async () => {
const response = await fetch('/api/user');
userData = await response.json();
})();
export { userData };
// Problem: userData might be undefined!// module.js
const response = await fetch('/api/user');
const userData = await response.json();
export { userData };
// userData is always ready!// config.js
const response = await fetch('/config.json');
const config = await response.json();
export const API_URL = config.apiUrl;
export const TIMEOUT = config.timeout;
export default config;
// Other modules can import immediately
// import { API_URL } from './config.js';// database.js
const connection = await initDatabase({
host: 'localhost',
port: 5432
});
await connection.connect();
console.log('Database connected!');
export default connection;
// Usage in other modules
// import db from './database.js';
// db.query('SELECT * FROM users');// utils.js
const locale = await fetch('/api/locale').then(r => r.json());
const translations = await import(`./i18n/${locale.code}.js`);
export const t = translations.default;
// Now other modules get the right language
// import { t } from './utils.js';
// console.log(t('hello')); // Bonjour (if French)// features.js
let hasWebGL = false;
let hasWebGPU = false;
try {
const adapter = await navigator.gpu?.requestAdapter();
hasWebGPU = !!adapter;
} catch {
hasWebGPU = false;
}
hasWebGL = !!document.createElement('canvas').getContext('webgl');
export { hasWebGL, hasWebGPU };
// Other modules can check features immediately
// import { hasWebGPU } from './features.js';Modules using top-level await block their importers until the await completes
Works only in ES modules (type="module"), not in scripts
If top-level await throws, the module fails to load
Use await at top level - no async function needed!
Works only in ES modules, not scripts
Config loading, DB setup, dynamic imports
Modern async module initialization