How to access class variable inside Promise then() function?

Question

I'm working on a Angular4 + PHP website, where i send HTTP requests to the server using Promise, since i want my application to perform routing according to the response of the server. I want to access a class variable inside the then() but it throws undefined() error.

Here is my code:

status = false;

checkUser(): Promise<any>{
// .....
    return this.http
        .get('http://localhost:8000/api/user', this.options)
        .toPromise()
        .then(this.extractData)
        .catch(this.handleError);
}

private extractData(res: any) {
    data = res.json();
    this.status = data.status; // here it throws error undefined 
    return this.status; 
}

Is there any other way to implement this?

Again. Change `this.extractData` to `res => this.extractData(res)`. This question is being asked again and again. — JB Nizet, Jan 02 '18 at 16:23
@JB Nizet Yes, I do agree, its been asked quite many times, but as a beginner to angular,typescript its very hard to follow up others code, hope you can understand :) — Suroor Ahmmad, Jan 02 '18 at 16:45
Sure. I've done this mistake myself. But google is your friend. Googling for the title of your question and clicking on the first few results would have given you the answer. — JB Nizet, Jan 02 '18 at 16:47

Günter Zöchbauer · Accepted Answer · 2019-11-11T07:52:28.920

14

If you pass a function reference, this won't point to the local class instance anymore.

You can use bind

.then(this.extractData.bind(this))

or arrow functions

.then((res) => this.extractData(res))

to get the desired behavior.

edited Nov 11 '19 at 07:52

answered Jan 02 '18 at 16:27

Günter Zöchbauer

623,577
216
2,003
1,567

1

Thanks for the answer :). It works – Suroor Ahmmad Jan 02 '18 at 16:46

How to access class variable inside Promise then() function?

1 Answers1