I've found a way to asynchronously load modules, but the result looks somewhat scary.
export default Promise.all([
// asynchronously load modules:
System.import('./details.js'),
System.import('./chartHelper.js'),
System.import('./dateHelper.js')
]).then(promises => {
// modules returned promises, so resolve them:
Promise.all([
promises[0].default,
promises[1].default,
promises[2].default
]).then(modules => {
// assign modules to variables:
var details = modules[0];
var chartHelper = modules[1];
var dateHelper = modules[2];
/* ...code dependent on loaded modules... */
});
});
Is there a way I can simplify this?
For instance, is there a synctatic sugar to resolve a result of the promise if the response of the original promise is also a promise? Or can I at least use named properties instead array indexes here?
Does this count as simpler?
export default Promise.all([
// asynchronously load modules:
System.import('./details.js'),
System.import('./chartHelper.js'),
System.import('./dateHelper.js')
]).then(promises =>
Promise.all(promises.map(promise => promise.default))
).then([details, chartHelper, dateHelper] => {
/* ...code dependent on loaded modules... */
});
(Incidentally, you had a slight bug: you weren't actually returning the value from the second Promise.all()
.)