Promises, Storage and Other funkiness

Hello folks.
I am on ionic version 3.20.0 and cordova version 8.0.0.

In my app, in HomePage class, there a few variables that are initiated. There is also a settings modal that lets the user update these few variables, which in turn then get put into storage.

When the app initializes, I wait for platform.ready because I need to use those variables and calculate geolocation.

This combination of storage and gelocation is throwing me off.

Here is a simplified version of the class:

export class HomePage {
 var1: String = "Default";
 var2: String = "Default2";
 var3: String  = "Default3";

constructor ((public platform: Platform,
                public modalCtrl: ModalController,
                public navCtrl: NavController,
                public loadingCtrl: LoadingController,
                private geolocation: Geolocation,
                private nativeGeocoder: NativeGeocoder,
                private dialogs: Dialogs,
                private storage: Storage,
               )) {

     this.storage.ready().then(() => {
            storage.get('var1').then((val) => {if (val) { this.var1 = val; }              });
            storage.get('var2').then((val) => {if (val) { this.var2 = val; }              });
            storage.get('var2').then((val) => {if (val) { this.var3 = val; }              });     
      });

 // when platform is ready, then lets get location based on var1, var2, var3
   this.platform.ready().then((readySource) => {
                // gets user's location and also uses var1, var2, and var3 for additional calculations 
                 this.askLocation();
            });
} // close constructor

// shows the Settings Modal so the user can update var1, var2, var3
 presentSettingsModal() {

        const settingsModal : Modal = this.modalCtrl.create("SettingsModalPage",
            {
                data: {
                    var1: this.var1,
                    var2: this.var2,
                    var3: this.var3,
                }
            }
        );


        settingsModal.present();

        settingsModal.onDidDismiss((data) => {

            this.var1 = data.var1;
            this.var2 = data.var2;
            this.var3 = data.var3;

            this.storage.set('var1',data.var1);
            this.storage.set('var2',data.var2);
            this.storage.set('var3',data.var3);

                // gets user's location and also uses var1, var2, and var3 for additional calculations 
                 this.askLocation();

        });
    }

} // close class HomePage

When the user opens the app for the first time, var1,var2,var3 use their default values and there are no problems.

When the user then clicks on Settings modal, all 3 variables are saved in storage and everything works as expected.

The Problem
The problem is when the app is terminated (not paused, but actually terminated). When the app restarts, var1, var2, and var3 use the Default values, and not values found in storage.

My understanding was that my actions in the constructor would set the 3 variables to whatever’s found in storage, but this.askLocation() gets triggered and it uses default values for all 3 variables.

Any advice appreciated.

Promises are like messages in the proverbial bottle. The person who throws the bottle in the ocean (storage.get()) has no clue when it will be read (the assignment to this.varX). Since your modal creation needs all three messages to have in fact been read, you probably want to look into using Promise.all() to wait on all of them collectively before trying to access var[123].