How to call an asynchronous JavaScript function?

Question

Can anyone please help me with the following, I am new to Async\Await in Javascript:

I have a trivial class:

function Thing()
{
}

Thing.prototype.ShowResult = function ()
{
    var result = this.GetAsync();

    alert(result);
}

Thing.prototype.GetAsync = async function ()
{
    var result = await this.AsyncFunc();

    return result;
}

Thing.prototype.AsyncFunc = async function ()
{
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(6);
        }, 2000);
    });
}

I call it like this:

var thing = new Thing();

thing.ShowResult();

I expected a delay of 2 seconds before seeing the result of 6.

Instead I immediately see:

[object Promise]

How can I correctly await the result? Thanks for any help.

Answer 1

You have to make the parent function consuming the async function async as well.

 function Thing() {} Thing.prototype.ShowResult = async function() { // add async var result = await this.GetAsync(); // await the response alert(result); } Thing.prototype.GetAsync = async function() { var result = await this.AsyncFunc(); return result; } Thing.prototype.AsyncFunc = async function() { return new Promise(resolve => { setTimeout(() => { resolve(6); }, 2000); }); }

Then you can call ShowResult

var thing = new Thing();

await thing.ShowResult();

But, if you're calling thing.ShowResult outside of an async function you'll have to use the Promise syntax since you can't await something that isn't in an async function .There's no concept of a "top level await" in JS. Yet.

var thing = new Thing();

thing.ShowResult().then( result => console.log(result) );

Answer 2

In JavaScript, async functions always return a Promise (this is why you see [object Promise] ), which can be resolved either by calling its then method or by using the await keyword. For now, await can only be used inside async functions.

To apply this to your problem, you can do one of the following:

#1

Thing.prototype.ShowResult = function ()
{
    this.GetAsync().then(alert);
}

thing.ShowResult();

#2

In this approach, ShowResult is also an async function. So what I wrote above also applies to it.

Thing.prototype.ShowResult = async function ()
{
    var result = await this.GetAsync();
}

await thing.ShowResult();

Answer 3

Though AsyncFunc and GetAsync are async functions. ShowResult function is not. It is necessary for the parent function to be async as well. The below code returns 6.

function Thing()
{
}

Thing.prototype.ShowResult = async function ()
{
    var result = await this.GetAsync();

    alert(result);
}

Thing.prototype.GetAsync = async function ()
{
    var result = await this.AsyncFunc();

    return result;
}

Thing.prototype.AsyncFunc = async function ()
{
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(6);
        }, 2000);
    });
}

var thing = new Thing();

thing.ShowResult(); 

Answer 4

Your function GetAsync() return a promise to consume the promise you have to either use await or .then read more about async/await

 function Thing() {} Thing.prototype.ShowResult = async function() { var result = await this.GetAsync(); alert(result); } Thing.prototype.GetAsync = async function() { var result = await this.AsyncFunc(); return result; } Thing.prototype.AsyncFunc = async function() { return new Promise(resolve => { setTimeout(() => { resolve(6); }, 2000); }); } var thing = new Thing(); thing.ShowResult();

using .then

 function Thing() {} Thing.prototype.ShowResult = async function() { var result = this.GetAsync().then((result)=>alert(result)); } Thing.prototype.GetAsync = async function() { var result = await this.AsyncFunc(); return result; } Thing.prototype.AsyncFunc = async function() { return new Promise(resolve => { setTimeout(() => { resolve(6); }, 2000); }); } var thing = new Thing(); thing.ShowResult();