Loosing context inside the callback

Question

I have a service which has this method:

public register(user, successCallback, errorCallback) {
    const httpHeaders = new HttpHeaders({
      'Content-Type' : 'application/json',
    });

    return this.httpClient.post(`${this.apiURL}/users/register`, user, { observe: 'response', headers: httpHeaders }).subscribe(
        (response) => successCallback(response),
        (error) => errorCallback(error)
    );
  }

I am calling that service method from a component

this.apiService.register(this.user, function(response) {
        this.router.navigateByUrl('/login', { state: { registered: true } })
      }, function(error) {
        console.log(error);
      });

On the line where I call this.router.navigateByUrl I am getting this error:

ERROR TypeError: Cannot read property 'router' of undefined

I understand that this is not defined, but I am not sure what is the proper way of using this within a callback.

Any advice?

Replace the `function() {...}` with the fat arrow `() => {...}` that way it binds to *its* lexical environment. — Nicholas K, Mar 26 '20 at 17:50

Nicholas K · Accepted Answer · 2020-03-26T17:54:22.547

1

Two ways to solve it:

ES6 way : Replace the function() {...} with the fat arrow () => {...} that way it binds to its lexical environment.

ES5 way : Use .bind to bind the execution context for this function.

 this.apiService.register(this.user, function(response) {
    this.router.navigateByUrl('/login', { state: { registered: true } })
 }.bind(this), function(error) {
   console.log(error);
 });

edited Mar 26 '20 at 17:54

answered Mar 26 '20 at 17:52

Nicholas K

15,148
7
31
57

1

Thanks, this is the solution! – Bob Mar 26 '20 at 17:54

score 0 · Answer 2 · answered Mar 26 '20 at 17:52

0

Create a reference to "this" outside the callback function.

let outerThis = this;
this.apiService.register(this.user, function(response) {
    outerThis.router.navigateByUrl('/login', { state: { registered: true } })
  }, function(error) {
    console.log(error);
  });

answered Mar 26 '20 at 17:52

Cristopher Rosales

476
1
4
14

I knew about this one, but I wanted to avoid it. Anyway, thanks for posting! – Bob Mar 26 '20 at 17:55

Loosing context inside the callback

2 Answers2