Angular http get with async await

Question

I have the following code in my service component, which gets me data from an api:

async getIngredientsByProductSubCategory(productSubCategoryId: number) {
    const url = '/my-url';
    let dataToReturn: any;
    await this.http.get(url).toPromise()
        .then(data => {
            console.log(data);
            dataToReturn = data;
        });
    return dataToReturn;
}

The problem is that the console.log above outputs the correct data, but when i execute it from another component like this:

this.myService.getIngredientsByProductSubCategory(4);

i get this output from my console.log:

What do i have to do, to get the correct data in the other component? Do i have to resolve this in any way?

UPDATE:

Working solution for me:

Service:

getIngredientsByProductSubCategory(productSubCategoryId: number) {
    const url = '/my-url';
    return this.http.get(url).toPromise();
}

Component:

async getIngredients() {
    const ingredientsByProductSubCategory = await this.frontendService.getIngredientsByProductSubCategory(4);
}

Also i read that if you don't have the requirement to consume recurring data, you may not use Observables.

Thanks to all for your help!

You have to await this.myService.getIngredientsByProductSubCategory(4) — Jacob
– Jacob, Commented Apr 22, 2020 at 17:26
Don't use then with await. Just do dataToReturn = await this.http.... — Heretic Monkey
– Heretic Monkey, Commented Apr 22, 2020 at 17:26
Does this answer your question? How do I return the response from an asynchronous call? — Heretic Monkey
– Heretic Monkey, Commented Apr 22, 2020 at 17:27
@HereticMonkey Does not change anything. Ive tried this before. I also read the article, but it didn´t help. I guess i'm missing something else here. I know how to rewrite it to make it work. But i want to know why the data (which obviously is there) is not returned correctly. — Mikaelik
– Mikaelik, Commented Apr 22, 2020 at 17:34

flawesome · Accepted Answer · 2022-09-12 06:11:52Z

6

.toPromise() is deprecated.

You should rather work with firstValueFrom or lastValueFrom.

Refer to this post for more details: Rxjs toPromise() deprecated

answered Sep 12, 2022 at 6:11

flawesome

3914 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Beast Over a year ago

Could u please complete your answer with a working example?

Yasser Nascimento · Accepted Answer · 2020-04-22 18:31:34Z

5

As you are declaring getIngredientsByProductSubCategory as async, automatically this method will return a Promise, so, all async, await or then are redundant here. We can simply write:

getIngredientsByProductSubCategory(productSubCategoryId: number) {
    const url = '/my-url';
    return this.http.get(url).toPromise();
}

and to consume that:

const ingredientsByProductSubCategory = await getIngredientsByProductSubCategory(someId);

answered Apr 22, 2020 at 18:31

Yasser Nascimento

1,38110 silver badges13 bronze badges

1 Comment

Mikaelik Over a year ago

Thank you. That seems the correct way todo it. Also is have to declare the function in the other component as async when it is executed with await.

Ashique Razak · Accepted Answer · 2022-10-20 16:04:03Z

2

.toPromise() is deprecated. Here is how to use the new lastValueFrom

Service

  Login(phone:string,password:string)
  {
    let _headers: HttpHeaders = new HttpHeaders({
      'accept': 'application/json'
    });
    return this.http.post(this.url,{username,password},{headers:_headers})
                .pipe(map(response=>response));
  }

Component

  async Login(phone:string,password:string)
  {
    let token$ =  this.authService.Login(phone,password);
    let token = await lastValueFrom(token$);
  }

answered Oct 20, 2022 at 16:04

Ashique Razak

6957 silver badges12 bronze badges

Comments

Aleksey · Accepted Answer · 2020-04-22 18:46:20Z

-3

You can return observable instead of data. My solution is:

    getIngredientsByProductSubCategory(productSubCategoryId: number) {
      const url = '/my-url';
      return this.http.get(url);
}

To get data you need to subscribe to observable:

getIngredientsByProductSubCategory(4)
   .subscribe((data) => { dataToReturn = data; });

answered Apr 22, 2020 at 18:46

Aleksey

301 silver badge2 bronze badges

1 Comment

ALex Over a year ago

how is this relevant to async/await?

Collectives™ on Stack Overflow

Angular http get with async await

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related