Calling a function within Promise.catch is undefined

Question

Attempting to call a function from within a Promise.catch to handle for an error situation, but I'm not sure how to structure it to avoid getting an undefined reference

The goal is call an async login() function and if the password is invalid display a message to the user

// Log in user
login(email, password){
//send login request to firebase
  this.af.auth.login(
    {
      email: email,
      password: password
    },
    {
      provider: AuthProviders.Password,
      method: AuthMethods.Password,
    }
  ).then(function(){
    console.log('Success');
  })
  .catch(function(error){
    this.showLoginErrorWindow(error);
  );
}

// Display error message to user 
// ** This function never gets called **
showLoginErrorWindow(message){
    console.log('message: ' + message);
    this.loginErrorMessage = 'Invalid email or password';
    this.showLoginError = true;    //Angular
}

Gives me the error:

TypeError: Cannot read property 'showLoginErrorWindow' of null

Promise is a javascript async method, and you are trying to use `this` in the javascript. — Smit, Mar 01 '17 at 16:45
Possible duplicate of [How to access the correct \`this\` inside a callback?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — James Thorpe, Mar 01 '17 at 16:45
post all your code, no way to know what `this` refers to in your example — Daniel Lizik, Mar 01 '17 at 16:47

score 2 · Answer 1 · answered Mar 01 '17 at 16:47

Just add current to the method and use it as you want. thats a link hack i do everytime.

// Log in user
login(email, password){
//send login request to firebase
var current = this;
  this.af.auth.login(
    {
      email: email,
      password: password
    },
    {
      provider: AuthProviders.Password,
      method: AuthMethods.Password,
    }
  ).then(function(){
    console.log('Success');
  })
  .catch(function(error){
    current.showLoginErrorWindow(error);
  );
}

// Display error message to user 
// ** This function never gets called **
showLoginErrorWindow(message){
    console.log('message: ' + message);
    this.loginErrorMessage = 'Invalid email or password';
    this.showLoginError = true;    //Angular
}

This is probably me doing it, if i am wrong please let me know.

score 1 · Answer 2 · edited Jan 07 '20 at 16:47

I recently got stuck with a similar kind of problem with firebase API. I was able to solve it by using the arrow function rather than the normal ones in the catch function something like:

login(email, password){
  //send login request to firebase
  var current = this;
  this.af.auth.login(
    {
      email: email,
      password: password
    },
    {
      provider: AuthProviders.Password,
      method: AuthMethods.Password,
    }
  ).then(function(){
    console.log('Success');
  })
  .catch((error)=>{
    current.showLoginErrorWindow(error);
  );
}

Calling a function within Promise.catch is undefined

2 Answers2