ionic storage getting values in Aync way

Question

I am trying to get 2 values stores in ionic storage , but the value are retrived in async way and request is happening before the values are retrived

Here Auth, url are in ionic storage

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import {Headers} from '@angular/http';
import { Storage } from '@ionic/storage';

/*
  Generated class for the SeasonService provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class SeasonService {
Auth;
url;

  constructor(public http: Http, public storage: Storage) {
    console.log('Inside SeasonService constructor');

    this.storage.get('Auth').then((Auth) => {
      console.log('Retrived Auth is', Auth);
      this.Auth = Auth;

    } );
    this.storage.get('url').then((url) => {
      console.log('Retrived url is', url);
      this.url = url;
    } );
   }

  public getSeasonList() {

          console.log('Season Auth is', this.Auth);
          console.log('Season url is', this.url);
        const headers: Headers = new Headers();
        headers.append('Authorization', 'Basic ' + this.Auth);
        headers.append('Content-Type', 'application/json');
        return (this.http.get('http://' + this.url +'/Windchill/servlet/rest/rfa/instances?module=SEASON',
        {headers: headers}).
        map((response: Response) =>  response.json()));
      }
}

The Output comes like this

Here
auth-service.ts:49 Headers {_headers: Map(2), _normalizedNames: Map(2)}
auth-service.ts:77 There
season-service.ts:19 Inside SeasonService constructor
season-service.ts:34 Season Auth is undefined
season-service.ts:35 Season url is undefined
season-service.ts:22 Retrived Auth is d2NhZG1pbjp3Y2FkbWlu
season-service.ts:27 Retrived url is 192.168.146.52
auth-service.ts:79 Your CSRF is laxYnd5XE6d/r+W655087+8dY5Irxc7do94fxLgvY5ImgNeIwsgI1bYaQdAzxZDM5sMZsqgbXppFntGDoJhrq+puJJROnN+N1MEcy7d4Js8ozs7Oxpwfpe0zRvcIktg=
auth-service.ts:82 Your Auth is d2NhZG1pbjp3Y2FkbWlu
auth-service.ts:85 Your url is 192.168.146.52

Answer 1

You have to wait for both promise to get resolved before make request. First move your storage code to some init method.

public init(){

let promiseList: Promise<any>[] = [];
promiseList.push(
 this.storage.get('Auth').then((Auth) => {
      console.log('Retrived Auth is', Auth);
      this.Auth = Auth;

    } ));
promiseList.push(
    this.storage.get('url').then((url) => {
      console.log('Retrived url is', url);
      this.url = url;
    } ));

return Promise.all(promiseList);
}

Now call init method before getSesonList as followed:

this.sessionService.init().then((values)=>{
this.sessionService.getSeasonList();
});

this will make sure that the getSeasonList method will be called after both storage promises get resolved.

Obviously you should put some error handling code but its upon you.