Aureliajs Waiting For Data on App Constructor

Question

I am developing an app in aureliajs. The development process is started for many months and now, the back-end developers want to make their services versioned. So I have a web service to call to get the version of each server side (web api) app and then, for the further requests, call the right api address including its version.

So, in the app.js I am requesting the system meta and storing it somewhere. But some components get initialized before this request gets done. So they won't find the version initialized and requesting the wrong server data.

I want to make the app.js constructor wait until this data is retrieved. For example something like this:

export class App {
  async constructor(...) {
    ...

    await this.initializeHttp();

    ...
  }

  initializeHttp(){
    // get the system meta from server
  }
}

but this solution is not applicable. Because the constructor can't be async. So how should I block the job until the system meta is retrieved?

UPDATE

The question is not a duplicate of this question. In that question, there is a place in outer class to await for the initialization job; although in my question, the main problem is, where to put this await-tion. So the question is not just about async function in constructor, but is about blocking all aurelia jobs until async job resolves.

Windshield

I had a similar requirement on a web app and to solve it I just load the server data on the index page before I load my aurelia app and put it on the global scope so I can access it easily from the aurelia app, like window.ServerMetadata = {}; – Cauldron

Possible duplicate of calling an async function in the constructor. and Asynchronous data loading in class constructor and Does async/await will allow us to be used on constructors? and Async/Await Class Constructor – Cleft

Don't do asynchronous http requests in your constructor. Do them before constructing the instance. – Sylvia

@Cauldron of course, this will be a possible solution. I will do it if no better one found. Thanks. – Windshield

@adiga, I think you have not read the question. The questions you have mentioned, are the places where we can wait for the on the outer side. Please read the UPDATE part for more explanation. – Windshield

@Sylvia in general places this hint will be accepted, but in aureliajs or other SPA frameworks, I am not constructing the components. So the question is absolutely what you skipped: how to tell aureliajs to not construct the components until async function resolved. – Windshield

Answer 1

Aurelia provides many ways to handle asynchronous flow. If your custom element is a routed component, then you can leverage activate lifecycle to return a promise and initialize the http service asynchronously.

Otherwise, you can use CompositionTransaction to halt the process further, before you are done with initialization. You can see a preliminary example at https://tungphamblog.wordpress.com/2016/08/15/aurelia-customelement-async/

You can also leverage async nature of configure function in bootstrapping an Aurelia application to do initialization there:

export function configure(aurelia) {
  ...
  await aurelia.container.get(HttpServiceInitializer).initialize();
}

Orlena

Thanks bigopon. Excellent review on possible solutions. And what about this one: in app.js not configing router (and also showing a loading indicator) and after async jobs done, add the routes to router. – Windshield

Probably an error somewhere during bootstrapping. Simply wrap everything inside configure fn with try/catch and log it to debug further i suppose – Orlena