CODEWITHSUNDEEP
javascriptpromiseasync-await
Andrew
Andrew

Reputation: 1435

Returning await'd value in async function is returning a promise

In Javascript, I am trying to return an await'd result from an async function. It seems if I use that result inside the async function then everything works fine, it gets treated as the resolve() parameter and everything is fine and dandy. However if I try to return the result, it gets treated as a callback, even though the await statement is there.

For example (using await'd result inside the async func): https://jsfiddle.net/w7n8f7m7/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="test">

function retPromise() {
  return new Promise((resolve, reject) => resolve('Hello'));
}

async function putText() {
  let result = await retPromise();
  $("#test").val(result);
}

putText();

versus returning the value and using it outside the async function: https://jsfiddle.net/hzoj2zyb/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="test">

function retPromise() {
  return new Promise((resolve, reject) => resolve('Hello'));
}

async function putText() {
  let result = await retPromise();
  return result;
}

$("#test").val(putText());

How come the await is properly returning the executed promise in the first fiddle, but not in the second? Is it because the jquery statement is inside an async function scope, so then it is able to be used properly?

Upvotes: 1

Views: 2013

Answers (1)

Taki
Taki

Reputation: 17654

From async_function MDN :

Return value

A Promise which will be resolved with the value returned by the async function, or rejected with an uncaught exception thrown from within the async function.

So putText() doesn't return the resolved value of retPromise() but returns a promise that will resolve with that value , so you have to use .then ( when fullfilled ) or .catch ( when rejected ) to access that.

function retPromise() {
  return new Promise((resolve, reject) => resolve('Hello'));
}

async function putText() {
  let result = await retPromise();
  return result;
}

putText().then( result => $("#test").val(result) )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<input type="text" id="test">

Upvotes: 1

Related Questions