JS class - 'this' is undefined in promise

Question

There is a Class and inside if this class I'm trying to fill up an array winch was defined in 'constructor'.

 class ClassA {

   constructor(){
      ...
      this.place = [];
   }

   fillUp() {
      fetch(path)
        .then(function(response) {
          return response.json();
        }).then(function(result) {

         this.place.push({"result":result})
        })
    }
 }
inst = new ClassA();   
inst.fillUp();

As a result i got this error: TypeError: Cannot read property 'place' of undefined. Where could be the problem?

Does this answer your question? [Why is 'this' undefined inside class method when using promises?](https://stackoverflow.com/questions/34930771/why-is-this-undefined-inside-class-method-when-using-promises) — Caramiriel, Nov 22 '19 at 15:42
Because you are inside a promise thenable, "this" now points to the thenable. You will need to do something like const self = this; as the first line in your fillUp function. Then instead of writing this.place.push, you would write self.place.push. — Freddie, Nov 22 '19 at 15:43

Tom O. · Answer 1 · 2019-11-22T16:20:30.457

You can solve your issue by using an arrow function expression in the callback attempting to push into the array. The problem with using a typical function expression is that it creates its own binding to the this keyword. Arrow functions on the other hand:

An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. So while searching for this which is not present in current scope, an arrow function ends up finding the this from its enclosing scope.

Therefore, you if you use an arrow function in the callback, the function will take this from it's enclosing scope (i.e.: the ClassA object).

Here's a demo of how it might work:

const mockFetch = new Promise((resolve, reject) => {
  console.log('Fetching data..please wait..')
  setTimeout(() => resolve({
    json: () => '{ data: \'Some response data\'}'
  }), 1500)
});


class ClassA {
  constructor() {
    this.place = [];
  }

  fillUp() {
    mockFetch.then(function(response) {
      return response.json();
    }).then(result => {
      this.place.push({
        "result": result
      });
      console.log(this.place);
    })
  }
}

inst = new ClassA();
inst.fillUp();

surgiie · Accepted Answer · 2019-11-25T14:36:39.343

this in javascript is weird. Depending on how the code/function is called on the object, it may return values you did not expect. If you are using modern javascript, you should use short arrow notation. This will preserve what this is binded to. Otherwise, you will have to add .bind(this) to the function where you are referencing this:

fetch(path)
    .then((response)=>{
        return response.json();
    }).then((result)=>{
        this.place.push({"result":result})
    })

score 0 · Answer 3 · answered Nov 22 '19 at 15:44

Use arrow function.

 class ClassA {

   constructor(){
      ...
      this.place = [];
   }

   fillUp = () => {
      fetch(path)
        .then(function(response) {
          return response.json();
        }).then(function(result) {

         this.place.push({"result":result})
        })
    }
 }
inst = new ClassA();   
inst.fillUp();

score 0 · Answer 4 · answered Nov 22 '19 at 15:44

0

The promise handlers are different functions with different this values.

To make the this equal inside, you can use arrow functions, which inherit this from where they've been defined:

class ClassA {

   constructor(){
      ...
      this.place = [];
   }

   fillUp() {
      fetch(path)
        .then(response =>  response.json())
        .then(result => {
          this.place.push({"result":result})
        })
      }
    }
inst = new ClassA();   
inst.fillUp();

Or, .bind() the functions:

class ClassA {

   constructor(){
      ...
      this.place = [];
   }

   fillUp() {
      fetch(path)
        .then(function(response) {
          response.json()
        })
        .then((function(result) {
          this.place.push({"result":result})
        }).bind(this))
      }
    }
inst = new ClassA();   
inst.fillUp();

answered Nov 22 '19 at 15:44

FZs

16,581
13
41
50

or the classic `var that = this;` before the promise starts. – TKoL Nov 22 '19 at 15:52
@TKoL Yes, but as of ES6, that's not the best method. However, in pre-ES6 that was the only one... – FZs Nov 22 '19 at 15:53
Thanks - I rewrite the function with ES6 arrow notation and 'this' works now without bind() or const that = this; – Iliagua Nov 22 '19 at 16:12
@TKoL Just a typo, I've meant to write pre-ES5, as `.bind()` was added in it. – FZs Nov 22 '19 at 18:26

score 0 · Answer 5 · answered Nov 22 '19 at 16:15

0

.then((result) => {
 this.place.push({"result":result})
})

works great. Than you!

answered Nov 22 '19 at 16:15

Iliagua

15
5

JS class - 'this' is undefined in promise

5 Answers5