CODEWITHSUNDEEP
javascriptasync-await
user3738290
user3738290

Reputation: 445

How to call an asynchronous JavaScript function?

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.

Upvotes: 5

Views: 2490

Answers (4)

Befeepilf
Befeepilf

Reputation: 647

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

Upvotes: 2

Sven.hig
Sven.hig

Reputation: 4519

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

Upvotes: 0

Adarsh C
Adarsh C

Reputation: 118

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

Upvotes: 0

mwilson
mwilson

Reputation: 12900

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

Upvotes: 4

Related Questions