Best way to use API with Angular Async

Question

I want to use my API asynchronously. I get some data from my API and i need to display them.

Here an example :

home.ts

async ngOnInit()
{
    console.log("NgInit 01");
    this.data = await this.api.getMe();
    console.log("NgInit 02");
    this.canDisplayData = true;
}

home.html

<div *ngif="canDisplayData">
   myData : {{ data }}
</div>

service_api.ts

async getMe() {
    let result: any;

    await this.http.get('http://dummy.restapiexample.com/api/v1/employees')
        .toPromise()
        .then(res => { result = res; })
        .catch(error => { console.log(error); });

    return result;
  }

this works, but i'm not proud at all of it. I'm sure i can do something better. Without use async and await.

Thank you for teaching me life, of angular/ionic :D

Try using observable / subscribe

Marian Simonca
– Marian Simonca

2018-12-11 09:43:47 +00:00
Commented Dec 11, 2018 at 9:43 — Marian Simonca
– Marian Simonca, Commented Dec 11, 2018 at 9:43

Muhammed Albarmavi · Accepted Answer · 2018-12-11 12:18:10Z

1

async/awit work on promise only so you need to convert observable to promise

service_api.ts

getMe() {
    return this.http.get('http://dummy.restapiexample.com/api/v1/employees')
  }

home.ts

async ngOnInit()
{
    console.log("NgInit 01");
    this.data = await this.api.getMe().toPromise();
    console.log("NgInit 02");
    this.canDisplayData = true;
}

another way is to use async pipe 🚀🚀

async/awit work on promise only so you need to convert observable to promise

service_api.ts

getMe() {
    return this.http.get('http://dummy.restapiexample.com/api/v1/employees');
  }

home.ts

ngOnInit()
{
    console.log("NgInit 01");
    this.data$ = this.api.getMe();
    console.log("NgInit 02");
}

tenplate

<div >
   myData : {{ data$ | async}}
</div>

edited Dec 11, 2018 at 12:18

answered Dec 11, 2018 at 9:54

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

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

7 Comments

misha130 Over a year ago

super minor note, I wouldn't call it this.data anymore but more like this.dataPromise. You probably would do the same but people who read this would probably need to take note. (I didn't downvote before)

Muhammed Albarmavi Over a year ago

@misha130 I don't get your point is there any wrong with my answer so I can edit

misha130 Over a year ago

this.dataPromise = this.api.getMe(); {{ dataPromise | async }} <- I meant like this, because its no longer the data but rather the promise of the data

ShamPooSham Over a year ago

I'd recommend learning the power of observables instead of converting to promises.

Muhammed Albarmavi Over a year ago

@ShamPooSham I never use toPromise becuase I don't use async/awit 😉

|

Pardeep Jain · Accepted Answer · 2018-12-11 09:52:15Z

0

I personally don't recommend to use async and await with angular when we have observable and subscribe of rxJs, just convert your code like this save extra variables too -

ngOnInit() {
  this.api.getMe()
    .subscribe(res => {
      this.data = res;
    },
    error => {
      console.log(error);
    });
}

<div>
   myData : {{ data }}
</div>

getMe() {    
    return this.http.get('http://dummy.restapiexample.com/api/v1/employees')
      .map(res => {
        return res;
      });
  }

edited Dec 11, 2018 at 9:52

answered Dec 11, 2018 at 9:48

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

9 Comments

ShamPooSham Over a year ago

1) let result: any in getMe() isn't needed anymore. 2) In Angular 6+, you need to use pipe on the observable and use the operator map inside of it.

ShamPooSham Over a year ago

@misha130 HttpClient will complete itself, no need to unsubscribe.

Pardeep Jain Over a year ago

@misha130 totally agree with your point, As I replicate only question part so forogot to add unsubscribe, also I answered assuming OP is using httpModule not httpClient.

ShamPooSham Over a year ago

@PardeepJain You're using the old rxjs syntax, take a look at the examples here: learnrxjs.io/operators/transformation/map.html

ShamPooSham Over a year ago

@misha130 That's true, I'm not familiar with ionic. Sure, it's not a bad point

|

Praveen Gupta · Accepted Answer · 2018-12-11 09:58:07Z

0

You can go with below one, async and await can slow your app.

Home.ts

 ngOnInit()
        {
            this.api.getMe().subscribe((data)=>{
               this.canDisplayData = true;
               this.data = data;
            }, (err) => {
               console.log(err);
            });
        }

Home.html

<div *ngif="canDisplayData">
   myData : {{ data }}
</div>

service_api.ts

getMe() {
    return this.http.get('http://dummy.restapiexample.com/api/v1/employees');
  }

edited Dec 11, 2018 at 9:58

answered Dec 11, 2018 at 9:52

Praveen Gupta

2461 silver badge5 bronze badges

Collectives™ on Stack Overflow

Best way to use API with Angular Async

3 Answers 3

7 Comments

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related