Are angular services accessible form an async context?

Question

So, I have been trying access my services inside a promise callback. I have added all necessary modules and imported them into my file. I have also declared them in the constructor.

//This is part of my login Component Class and this line code is bound to a //button click

clicked(){
this.http.get(..)toPromise().then( this.loginCallbackHandler ).catch((error) => console.log(error));
      //any service accessed here works fine example
      console.log(this.app)// this is fine here
}
//
loginCallbackHandler(reponse){
      //accessing any service from here produces the the error below (error1)
      //For example
      console.log(this.html)
      //Or
      console.log(this.app)
}
//constructor definition
  constructor(@Host() public app: AppComponent,
              private oauthService: OAuthService,
              private http: HttpClient
              ){}

//Error1

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'html' of undefined
TypeError: Cannot read property 'html' of undefined
    at push../src/app/login/login.page.ts.LoginPage.loginCallbackHandler (login.page.ts:64)
    at

Edit: The issue turned out to be an issue in my understanding to the context of the 'this' keyword, but not in angular services.

*Are angular services accessible form an async context?* Yes — Antoniossss, Jul 31 '19 at 17:28
But as I have shown above its not working out for me for some reason. — A NASR, Jul 31 '19 at 17:34
Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Heretic Monkey, Jul 31 '19 at 19:01
just a suggestion, there's no reason to convert this to a promise. use the `.subsccribe` method of the observable and use the next / error handlers as needed — bryan60, Jul 31 '19 at 20:19
Yea, I was trying to apply my understanding to promises. Thanks for the suggestion though. — A NASR, Jul 31 '19 at 20:28

score 2 · Answer 1 · answered Jul 31 '19 at 17:29

2

Change this

this.http.get(..)toPromise().then( this.loginCallbackHandler )

to this

this.http.get(..)toPromise().then( this.loginCallbackHandler.bind(this) )

clousures has no this context so you must bind it.

answered Jul 31 '19 at 17:29

Antoniossss

31,590
6
57
99

pascalpuetz · Answer 2 · 2019-07-31T21:08:50.640

1

As already mentioned in some comments, the this context is not what you expect. Either use .bind(this) or use the lambda syntax.

clicked() {
   this.http.get(..)
      .toPromise()
      .then(response => this.loginCallbackHandler(response))
      .catch(error => console.log(error));
}

I'd recommend reading up on how this context behaves in JavaScript (and therefore in TypeScript). This would be a good start.

On another note, you could also use async/await if you want to use promises.

async clicked() {
   try {
      const response = await this.http.get(..).toPromise();
      this.loginCallbackHandler(response) ;
   } catch (error) {
      console.log(error);
   } 
}

edited Jul 31 '19 at 21:08

answered Jul 31 '19 at 18:57

pascalpuetz

5,238
1
13
26

Thank's that should be helpful. – A NASR Jul 31 '19 at 19:53
You're welcome. I updated the answer to include another alternative - async await. – pascalpuetz Jul 31 '19 at 21:10

Are angular services accessible form an async context?

2 Answers2