How to get promise's returned value in JS?

Question

This is my async function:

const returnNumberOfFoods = async() => {


  const web3 = new Web3(url);
  // const networkId = await web3.eth.net.getId();
  const myContract = new web3.eth.Contract(
    Contract.abi,
    Contract.address
  );

  let result;
  await myContract.methods.numberOfFoods().call(function(err, res) {
    result = res;
  });
  return result;
}

And this is how I am trying to get value:

const numberOfCardsPromise = returnNumberOfFoods();

const numberOfCards = numberOfCardsPromise.then(value => { return value; });
console.log(numberOfCards);

But this is what I get in console:

Promise {<pending>}
    [[Prototype]]: Promise
    [[PromiseState]]: "fulfilled"
    [[PromiseResult]]: "4"

The PromiseResult is my desired output.

Please see [How do I return the response from an aynchronous call](https://stackoverflow.com/q/14220321/438992), which this duplicates. — Dave Newton, Sep 16 '21 at 15:55
You are trying to mix asynchronous and synchronous code, which is not possible in a simple way. In fact, the whole point of asynchronous code is to run separately. To see it in the console, try putting in `numberOfCardsPromise.then(value => {console.log(value)})`. If you need to work with the variable itself, then work with it _within_ the `then` declaration. — Endothermic_Dragon, Sep 16 '21 at 15:57
What is `numberOfFoods`? What is `call` -- is it the native `Function#call`? — trincot, Sep 16 '21 at 15:59
Could you provide the link to the documentation for these methods? What do they return as data type? — trincot, Sep 16 '21 at 16:01
@trincot https://web3js.readthedocs.io/en/v1.2.11/web3-eth-contract.html#id31 please have a look. — Shourya Shikhar, Sep 16 '21 at 16:09
Check out my answer - I added some code snippets to demonstrate what I'm trying to explain. Essentially, the rule of thumb is to not mix `async` and `sync` code until you understand exactly how it works. An example of 'mixing' could be threading, where you are trying to run multiple operations parallelly (though service workers would be better for that, which by the way are also asynchronous). — Endothermic_Dragon, Sep 16 '21 at 16:16

score 1 · Answer 1 · answered Sep 16 '21 at 15:58

1

Have 2 ways:

First:

const numberOfCards = await returnNumberOfFoods();

Second:

returnNumberOfFoods().then((return) => {
   console.log(return);
});

answered Sep 16 '21 at 15:58

naxsi

602
3
15

Just a few suggestions - firstly, you don't need your 'first' step, the second step itself will suffice. Secondly, try not to use `return` as a variable as that is a special keyword that might cause problems. – Endothermic_Dragon Sep 16 '21 at 16:01
1

This answer does not solve the Asker's problem. – trincot Sep 16 '21 at 16:03

Endothermic_Dragon · Answer 2 · 2021-09-16T16:20:53.223

There are many ways to solve your problem. However, mixing synchronous and asynchronous code is not one of them.

A potential solution would be to work with the then statement:

async function test(){
  return true
}

test().then(value => {
console.log(JSON.stringify(value) + " (I'm asynchronous!)") //works
})
console.log(test()) //doesn't work, returns unfulfilled promise

You can also declare another await statement - but note that this has to be inside another async function, as synchronous code will not 'pause' until the value is defined.

async function test(){
  return true
}

async function logValueAsync(){
  value = await test()
  console.log(JSON.stringify(value) + " (I'm asynchronous!)") //works
}


function logValueSync(){
  value = test() //await actually generates an error as it is in a synchronous function
  console.log(value) //doesn't work, returns unfulfilled promise
}

logValueAsync()
logValueSync()

Note that while it may show that the sync code returns {}, in reality it is a promise. You can run this in your browser console to see what I'm talking about.

QuickSort · Answer 3 · 2021-09-16T16:01:52.930

-1

This will give you the value:

const numberOfCards = await returnNumberOfFoods();
console.log(numberOfCards) // desired result

edited Sep 16 '21 at 16:01

answered Sep 16 '21 at 15:56

QuickSort

494
5
14

2

The `await` statement won't do anything - it will still print the same way in the console. – Endothermic_Dragon Sep 16 '21 at 15:59
Sure there is reason for a downvote, @naxsi. This answer doesn't solve the problem. It is clear it hasn't been tested with the rest of the Asker's code – trincot Sep 16 '21 at 16:00

How to get promise's returned value in JS?

3 Answers3