Search code examples
javascriptwebpackecmascript-6es6-promisewebpack-2

Is it possible to simplify promise resolve inside a promise?


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?


Solution

  • 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().)