Sandeep540 Sandeep540 -4 years ago 93
TypeScript Question

ionic storage getting values in Aync way

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download