TypeScript - How can I access "this" in async method

Question

I have this piece of code:

export class Profile {

    private resource: Resource = new Resource();


    /**
     * Problem here
     */
    async initialize(): Promise<void> {
        console.log(this.resource);

        var html = await this.resource.fetch(true);

        const $profile = jQuery(html);

        console.log($profile.find("span.largetext"));


    }
}

If you can see the line console.log(this.resource), I get undefined. Can't async methods access the "this"?

I also tested with console.log(this), and it returns Profile { } in the web inspector.

Is there a way I can access this?

Well, the value of this. But I just realized that you said it would refer to a Profile instance. In that case this doesn't have a resource property for whatever reason. — Felix Kling
– Felix Kling, Commented Feb 8, 2016 at 16:36

MartyIX · Accepted Answer · 2016-02-08 07:45:54Z

3

class Profile {

    private resource: number = 1;


    /**
     * Problem here
     */
    async initialize(): Promise<void> {
        console.log(this.resource);
    }
}


let p = new Profile();
p.initialize();


let p = new Profile();
p.initialize();

I created this sample script which transpiles to

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promise, generator) {
    return new Promise(function (resolve, reject) {
        generator = generator.call(thisArg, _arguments);
        function cast(value) { return value instanceof Promise && value.constructor === Promise ? value : new Promise(function (resolve) { resolve(value); }); }
        function onfulfill(value) { try { step("next", value); } catch (e) { reject(e); } }
        function onreject(value) { try { step("throw", value); } catch (e) { reject(e); } }
        function step(verb, value) {
            var result = generator[verb](value);
            result.done ? resolve(result.value) : cast(result.value).then(onfulfill, onreject);
        }
        step("next", void 0);
    });
};
class Profile {
    constructor() {
        this.resource = 1;
    }
    /**
     * Problem here
     */
    initialize() {
        return __awaiter(this, void 0, Promise, function* () {
            console.log(this.resource);
        });
    }
}
let p = new Profile();
p.initialize();
//# sourceMappingURL=main.js.map

and the output is

as expected. So the conclusion is that it's not about this keyword. It's about Resource class, I guess.

answered Feb 8, 2016 at 7:45

MartyIX

28.8k33 gold badges143 silver badges218 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anirudh talluri Over a year ago

hi @MartyIX, in es2017 inside the async method for me I am able to access console.log(this) and it is also displaying in the console but during debugging when I am manually typing 'this' in the console then it is showing as undefined Any suggestion or solution for this issue

Collectives™ on Stack Overflow

TypeScript - How can I access "this" in async method

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related