[No duplicado]

• El await import() importa un módulo EC estáticamente (en lugar de import() importa dinámicamente), es muy similar a la sintaxis del módulo CommonJS require() , este es el único propósito de la palabra clave await de nivel superior

Compatible con: (node.js 14.8.0) (chrome 89) (Firefox 89) al momento de escribir esto

• Entonces, ¿por qué usarlo si ya tenemos todas esas hermosas sintaxis de importación estática? (como: import * as imp from './someModule.mjs )
• Bueno, es más sencillo de escribir y más fácil de recordar (por ejemplo: await import('./someModule.mjs') requiere estáticamente el 'someModule' y devuelve sus datos exportados como objeto {default:'someDefVal'[, ...]}

 // static import -----------------------------------// blocks this module untill './module1.mjs' is fully loaded // traditional static import in EC modules import * as imp from './module1.mjs'; console.log( imp ); // -> {default:'data from module-1'} // static import with await import() (does the same as above but is prettier) console.log( await import('./module1.mjs') ); // -> {default:'data from module-1'} function importFn1(){ // the await import() is a satic import so cannot be used in a function body // await import('./module1.mjs'); // this would throw a SyntaxError: Unexpected reserved word } // dynamic import ----------------------------------// does not block this module, the './module2.mjs' loads once this module is fully loaded (not asynchronous) import('./module2.mjs') .then((res)=>{ console.log(res) }) // -> {default:'data from module-2'} .catch((err)=>{ console.log(err) }); (function ImporFn2(){ import('./module2.mjs') // dynamic import inside a function body .then((res)=>{ console.log(res) }) // -> {default:'data from module-2'} .catch((err)=>{ console.log(err) }); })(); console.log( '----- MAIN MODULE END -----' );

• resultado en consola

 { default: 'data from module-1' } { default: 'data from module-1' } ----- MAIN MODULE END ----- { default: 'data from module-2' } { default: 'data from module-2' }