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();