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?

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.

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.
});