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.

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.

• javascript
• async-await

Share Improve this question Follow edited Jul 14, 2020 at 14:32 user3738290 asked Jul 13, 2020 at 16:06 user3738290user3738290 44566 silver badges2222 bronze badges 1

• 4 Notice you realize it's necessary to await in GetAsync(). Why do you think it's not necessary in ShowResult()? – Patrick Roberts Commented Jul 13, 2020 at 16:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

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

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

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