How can I call component method from async function?

Question

My code:

export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    FB.getLoginStatus(function (response) {
      this.ParseFacebookLoginStatus(response);
    });
  }

  ParseFacebookLoginStatus(response) {
    console.log(response.status);
  }

My console is outputting ERROR TypeError: this.ParseFacebookLoginStatus is not a function.

I just guessing here that getLoginStatus is async and this in the result context insnt my TestComponent? How can I return to my TestComponent with a proper callback?

Thats it @Sheki, works like a charm! Thanks! Add it as answer and ill accept it :D — Script0r, Jul 31 '19 at 22:06
I'm glad I could help! (by the way, the problem has nothing to do with async or sync it has to do with the context of `this`) — Sheki, Jul 31 '19 at 22:10

score 2 · Accepted Answer · answered Jul 31 '19 at 22:18

Use arrow function instead of the keyword function like

FB.getLoginStatus((response)=>{

or save this in a variable and use that instead of this before calling FB.getLoginStatus like:

ngOnInit() {
  let $this = this;
  FB.getLoginStatus(function (response) {
    $this.ParseFacebookLoginStatus(response);
  });
}

otherwise the keyword this is not referring to the component but to the new function.

So the problem has nothing to do with async or sync it has to do with the context of this.

How can I call component method from async function?

1 Answers1