Show SplashScreen While Calling HTTP

I added the code
this.callHTTP()
to the MyApp constructor in app.components.ts where

async callHTTP(){ await this.doHTTP(); }
doHTTP(){…} // set this.rootPage and transfer to another page when done

app.html just contains
<ion-nav [root]=“rootPage”>

When the app starts it displays a splash screen and then the app.html screen. It doesn’t transfer to another page until the constructor finishes. I’ve tried this with and without async/await but the same thing occurs. I know I can’t use the async keyword on the constructor so that’s not an option.

Is there any way to display the splash screen until the page transfer is ready and not show app.html and do the page transfer until then? Alternatively, is there any way to prevent the constructor from completing until the HTTP call is finished since I could put the page transfer at the end of the constructor?

  1. Async/await encourages all kinds of antipatterns. Strongly recommend to refactor in favor of Promises/Observables.
  2. I would never put an asynchronous call in a constructor. In general, put little or nothing in the constructor. The more the constructor has to do, the slower your pages will load.
  3. Put you http call in a service provider, and call the provider in some page life cycle event, like ngOnInit or ionViewWillEnter.
1 Like

Is there any way to do something “behind the scenes” while the splash page is displayed? I actually have my HTTP methods in a service provider and usually put minimal code in constructors. I agree with you about avoiding asynchronous calls in constructors. Using a lifecycle event doesn’t help since MyApp doesn’t seem to invoke any events (e.g., ionViewWillEnter). I know I can add something like “Please Wait” to app.html so a blank page isn’t shown but I don’t want the app.html page to load until the page transfer is ready. However, I don’t see any way to accomplish this.

What do you mean by MyApp? app.component.ts? Or are you using some Ionic 2 beta version?

Answer to question: have the call start and end in your provider. The http request returns to the provider, and the provider nexts it in a Subject (either Replay or Behavior depending on your needs), then the pages that need that information subscribe to the Subject and use the information when it’s available.

Yes, MyApp is in app.components.ts and I’m using Ionic 3.9.2. However, what I want to know is the following: "Can anything be done, such as an HTTP call, while the splash screen is displayed."
I think the answer is no but I could be wrong.

I don’t think so, because the app code is being loaded at that point.

Firing off asynchronous calls is cheap, because they won’t start doing their work right away. I agree about doing heavy synchronous work in a constructor, but async calls don’t bother me. The main reason I would move them to lifecycle events isn’t constructor performance, but rather if there needs to be a teardown (such as unsubscribing).

Fair point, I was conflating two things. I don’t put async calls in the constructor, but I do sometime put a call to the doAsyncMethod() which is basically the same as putting it in the constructor. But it’s to modularize the async calls, so it’s possible to undoAsyncMethodI() later (stop updating cache, etc.). Which is your teardown point.