How to get result of promise from angular service with Ionic storage, instead of Promise<any> in response

Question

I'm using Ionic Storage for local storage purpose. To work with storage I've created service , where I've getter and setter storage methods.

I want to check on load of application that, if any value is available on storage or not, if value is not available in storage than only want to make actual data call and will set to storage, but next time on wards want to read from storage rather than making actual get call for data.

Now problem is when my component gets load, I'm calling service's storage.get method which takes time and because of that component's property is not getting seted with actual storage's correct value.

Also, method used to return string value form service is not allowing to write method without final return statement as mentioned in code below [right now I've added two return statement from Promise, which doesn't seems correct design to me, but without it i'm getting compilation error] , and both return statements gets executed at different interval of time due to time taken by Promise to get response from storage, which yields overtiring of actual response from storage.

I'm not sure how to manage such scenario from promise, as Ionic storage by default returns Promise.

 getDefaultLanguage(): string {

     this.storage.get('defaultLanguage').then((res) => {
       return this.defaultLanguage = res || 'en';
     });
     return this.defaultLanguage;
   }

Please let me know how I can hold execution in component until I get response from above service call with Promise, so core component's logic can work properly, also wanted correct way to implement service layer where I want result as string from Promise instead of promise<any> .

Answer 1

The easiest way is to convert it to a promise:

 getDefaultLanguage(): Promise <string> { return new Promise( (resolve, reject) => { this.storage.get('defaultLanguage').then((res) => { resolve(res || 'en'); }); }); }

The reason why your current method doesn't work is because this.storage.get is asynchronous. It will not complete in time for return this.defaultLanguage to work. Wrapping your get call in another Promise is one way to do it.

Answer 2

You can use async to wait for the promise to be resolved:

async getDefaultLanguage(): Promise<string> {
    const res = await this.storage.get('defaultLanguage');
    this.defaultLanguage = res || 'en';

    return this.defaultLanguage;
}

Just keep in mind that with this solution getDefaultLanguage must now be called asynchronously

Answer 3

Thanks @Nenroz and @mwilson for both of your answers.

It helps me understands how Promise actually works, I was rather looking for single service method which directly returns me string value from Promise and also wanted to wait for further code execution until than.

As, front-end framework react to change itself, so instead of actual ask for this question to wait till getting value from Promise, I'd find a way to manage to hold UI until Promise get resolves as below. (without awaiting further code execution)

added method InitStorage() in app.component.ts 's constructor

 InitStorage() {
     const defLanguage = this.storageService.getDefaultLanguage();
 }

StorageService.ts 's method as below to return Promise<string>

 getDefaultLanguage(): Promise<string> {
     return this.storage.get('defaultLanguage');
 }

Now to wait till getting value from above method and stop further code execution until promise gets resolved, added its implementation in ngOnInit in page.ts

 ngOnInit() {
      this.defaultLanguage = this.storageService.defaultLanguage;
 }

and added its value in page.html file, so once value is available in variable html can refreshed/set by framework, previously I was not able to bind its value in HTML (previously Value was getting sated after Page was getting loaded, and UI was not getting updated)

 <ion-radio-group [value]="defaultLanguage" />

I'm not sure if this correct architecture of service and Promise in Angular , but this is how I managed to get Storage value in service and able to update UI with correct storage value when sated in variable.

Looking forward to any further suggestion for architectural improvement and thanks for all valuable suggestions.