Ionic Asynchronous Task


I have a problem with my Ionic application, in this application only recovered data from an API, but at times the data recovery takes too much time and suddenly the application crashes. I heard about asynchronous spots that could fix my problem. But I did not find anything on this subject with Ionic. Would you have an idea of ​​how? Or maybe with another solution that would allow my application to not crash when data recovery takes a while to run.


You can use Ionic life cycle hook to solve the data loading issue
Life cycle events
or try SetTimeout.

I have a video explaining the basics of running asynchronous code in Ionic:

I believe there is more benefit in understanding the api call you are making and how you are handling the exceptions

Even if you go for the earlier recommendations, u still need to handle errors appropriately. And where needed set a timeout

I suggest u to post your code handling the api call

My problem comes from declaring a variable before the constructor. And suddenly even using loading in the constructor, the problem happens before. I would like to know how to declare this variable later, and not before the constructor.

The variable is collaborateur: ApiGsbGlobal = new ApiGsbGlobal;

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { MenuPage } from '../Menu/menu';

import { ApiGsbGlobal } from '../../models/apiGsb-global.model';
import { ApiGsbService } from '../../services/apiGsb.service';

import { LoadingController } from 'ionic-angular';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

  collaborateur: ApiGsbGlobal = new ApiGsbGlobal;
  matricule: string;
  date: string;

  constructor(public navCtrl: NavController, private apiGsbService: ApiGsbService) {


  private connexion(){

    .then(collaborateurFetched => {
      this.collaborateur = collaborateurFetched;
      if(this.matricule != null && this.collaborateur.COL_DATEEMBAUCHE =={

I wonder if this is needed and usefull. You can just declare collaborateur: ApiGsbGlobal; .

Using new on a model is rarely needed (if the model is in fact a typical typescript interface declaration).

Secondly, the getUnCollaborateurs seems already async as it is thennable. Can’t tell what is behind it though. If there is a http-call behind it, then you have your async behavior as requested in the OP.

Your constructor seems clean and you should keep it that way.

When is connexion called? What should be the UI action if the if condition is not met?

So remains still a bit vague to me what the problem really is.

1 Like

I second the suggestion to refactor things so that you never type the word “new”. Everything in your app should either be (a) an interface or (b) a class that is under Angular DI lifecycle management, so the only way you get one is by injecting it into a constructor of something else. If you follow that design rule, you will completely eliminate any potential for problems that can be described as “coming from declaring a variable before the constructor”.