Http get request URL shows [object promise]

Question

I am trying to use web api call get method to access data and display in my page. My url would be something like: https://localhost:44399/api/APIOrder/[email protected] to be able to display the data.

However, when I combine my url with a variable,it doesn't display anything and console log shows the url in https://localhost:44399/api/APIOrder/GetUserOrder?email=[object Promise]. Is there any way to let the url read my this.User variable?

please review my getUserOrder()

User = this.storage.get('currentUser');
constructor(private http:Http,public storage: Storage){
   
}

public getUserOrder()
{
  var url="https://localhost:44399/api/APIOrder/GetUserOrder?email=";
  console.log(url+this.User);
  return this.http.get(url+this.User).map(res=>res.json());
  
}

I am really new to this. Pls tell me if i am unclear. Any help would be much appreciated..

UPDATE

It shows undefined because it accessed the variable value on top but not from ionViewWillEnter

User:string;
constructor(private http:Http,public storage: Storage){
   
}


async ionViewWillEnter()
{
  this.User = await this.storage.get('currentUser');
}
public getUserOrder()
{
  var url="https://localhost:44399/api/APIOrder/GetUserOrder?email=";
  console.log(url+ this.User);
  return this.http.get(url+this.User).map(res=>res.json());
  
}

Answer 1

You should await the return of the Promise. You can do this inside the constructor or inside a lifecyle like ionViewWillEnter()

User: string;

async ionViewWillEnter() {
  this.User = await this.storage.get('currentUser');
}

Answer here: "This is the expected result."

UPDATE

This is a different approach: if your function is directly called somehow, you can create a function which returns the variable from storage. If the data is found, proceed with the http request.

async getUserOrder() {
  const user = await this.getUserFromStorage();

  if (user) {
    var url="https://localhost:44399/api/APIOrder/GetUserOrder?email=";
    return this.http.get(url + user).map(res=>res.json());
  }
}

async getUserFromStorage(): Promise<string> {
  return await this.storage.get('currentUser');
}