ES6 Class Promise Chain -- Accessing 'this'

Question

I'd like to reference a class property in my second promise. However, in the class function pTwo, 'this' is undefined. I understand that I'm in the promise scope, how might I access the PromiseChain instance scope?

Using ES6 and native promises.

class PromiseChain {
    constructor(){
        this.food = 'Pasta';
        this.type = 'Italian';
    }

    pOne() {
        console.log('pOne');
        return Promise.resolve();
    }

    pTwo() {
        console.log('pTwo');
        try {
            console.log(this.food);
        } catch (e) {
            // can't read 'food' of undefined! 
            console.log(e);
        }
        return Promise.reject()
    }

    work() {
        console.log('Get to work!');
        this.pOne().then(this.pTwo).catch((error) => {
            console.log(error);
        })
    }
}

new PromiseChain().work();

Halfpint · Accepted Answer · 2016-08-06T18:56:19.103

6

This is simple, you need to bind your call of pTwo to the correct scope, in Javascript we can do this with the bind() method.

Therefore:

this.pOne().then(this.pTwo.bind(this)).catch((error) => {

Will bind your call to pTwo to the correct scope, resulting in:

Get to work!
pOne
pTwo
Pasta
undefined

To be printed; if you want the last undefined to return something, pass a message in your reject parameter.

If you do not want to clutter your code base with lots of .bind(this) you could explicitly set a reference to this in the current scope and pass it as a parameter to each of your promises; in your case in the work method declare:

work() {
    var that = this;
    console.log('Get to work!');
    this.pOne().then(this.pTwo(that).catch((error) => {
        console.log(error);
    }));
}

Note that now pTwo accepts an argument of that, now inside of pTwo we can do the following:

pTwo(parentScope) {
    console.log('pTwo');
    try {
        console.log(parentScope.food);
    } catch (e) {
        // can't read 'food' of undefined! 
        console.log(e);
    }
    return Promise.reject()
}

Notice that we pass the parameter parentScope which allows us to ref the correct scope.

edited Aug 06 '16 at 18:56

answered Aug 06 '16 at 18:43

Halfpint

3,967
9
50
92

1

Hey @Alex, totally right thanks for the mental boost! Say in the scenario where you have 10 promises chained together, adding .bind(this) to each seems a little verbose is there a cleaner way to do so? – 1dolinski Aug 06 '16 at 18:45
If you find a cleaner way I'd be most intrigued! Unfortunately my code suffers from `.bind` littering to. :) – Halfpint Aug 06 '16 at 18:47
Will do :) Thanks again! – 1dolinski Aug 06 '16 at 18:49
Updating my answer now with another alternative – Halfpint Aug 06 '16 at 18:49
I'll stick with bind :D I believe the second option of 'this.pTwo(that)' means that pTwo is invoked immediately and does not wait for the first promise to resolve. – 1dolinski Aug 06 '16 at 20:30
You're absolutely right! I didn't spot that :) – Halfpint Aug 06 '16 at 21:15

ES6 Class Promise Chain -- Accessing 'this'

1 Answers1