System.import promise chaining

Question

I've stumbled upon some snippets similar to this one:

  System.import('core-js').then( function() {
    System.import('polymer/mutationobservers').then( function() {
      System.import('aurelia-bootstrapper');
    })
  });

Is it a substitution for callback hell - a promise hell? Can sequential System.imports be flattened to make use of promise chaining, or there may be problems with that?

Cycloplegia

@torazaburo I'm just citing existing code piece, but yes, these 3 modules depend on each other. The first two are polyfill libraries, it is dev's choice if they are required. – Cycloplegia

@torazaburo He linked to the location the code is from. It explicitly says that you have to load those if you want IE9 support, but that they are optional. The snippet is directly from the Aurelia website. They do depend on eachother by virtue of being polyfills and relying on globals being present. – Hertel

@estus - promises are unfortunately widely misunderstood, so yes you'll come across code like this quite a bit. That being said, there are legitimate ways to avoid callback hell - and the same people who created mountains of callbacks likely have no problem creating mountains of promises. – Strudel

@Strudel It was confusing to see that in decent framework's documentation (and I consider Aurelia a decent one), so made me wonder if there was some reason behind that. – Cycloplegia

Answer 1

I'd recommend chaining instead, e.g.

System.import('core-js')
    .then(function(){
        return System.import('polymer/mutationobservers');
    })
    .then(function(){
        return System.import('aurelia-bootstrapper');
    });

When you return a promise from a then, it will wait for that to resolve before executing the next then, so in this case mutationobservers must load before aurelia-bootstrapper.

Hertel

Answer 2

Since System.import returns a promise, use a group of promises. I find it quite a bit more straight forward than chaining.

Promise.all([
    System.import('core-js'),
    System.import('polymer/mutationobservers'),
    System.import('aurelia-bootstrapper')
]).then(function(modules) {
    var corejs = modules.shift(),
        mutationobservers = modules.shift(),
        aureliaBootstrapper = modules.shift()
    ;

    // You code goes here.
});

Mulvaney

I guess that the problem here is that the first two are polyfill libraries. But other than that, yes, it would be a good use case for Promise.all. – Cycloplegia

Using es6 destructuring, you can avoid having to use modules.shift() to assign the module variables, e.g. .then(([corejs, mutationobservers, aureliaBootstrapper]) => { // your code ... – Fulford

Answer 3

I prefer async/await in this situation however you need to be inside an async function which might not always work for import statements

function async doStuff () {
    await System.import('core-js');
    await System.import('polymer/mutationobservers');
    await System.import('aurelia-bootstrapper');
    console.log('everything done!!!');
}

Timeworn