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

Question

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?

• Jaromanda X: yes because async/await is merely syntactic sugar for promises - a function labelled async is guaranteed to return a Promise - effectively, your second putText function is function putText() { return retPromise(); } - although, in reality, it is far more complex
• Bergi: An async function always returns a promise - it has to, as it cannot magically execute asynchronous stuff synchronously and return the result from the future immediately.
• Jaromanda X: return the result from the future immediately - if it could, I'd create a promise for lotto numbers :p

Answer 1

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">