Angular http 获取异步等待

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!

Answer 1

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);

Answer 2

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; });

Answer 3

.toPromise() is deprecated.

You should rather work with firstValueFrom or lastValueFrom .

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