Async / Await - Return values
When reading async / await
code you come across different styles of return
ing a value in an async
function.
Some just return the plain value:
async function test1() {
return 5
}
Others return a promise:
async function test2() {
return Promise.resolve(5);
}
While the third group don't just use and return a Promise
, they await
it:
async function test3() {
return await Promise.resolve(5);
}
So, you might wonder what the correct way to do this is, or if there even is a difference.
But there is no right way to do it, in fact the behavior is exactly the same in all three cases. The important thing is that async
functions always return a Promise
`.
the return value of an async function is implicitly wrapped in Promise.resolve. - MDN
So if you chain a then
on the Promise of any of these functions (or await
these functions if you want to use async/await
), it will only be called once the (implicitly wrapped) Promise is resolved
.
const delayedLog = message =>
new Promise(resolve =>
setTimeout(() => {
console.log(message);
resolve(message);
}, 1000)
);
async function test1() {
await delayedLog(1);
return 1;
}
async function test2() {
return delayedLog(2);
}
async function test3() {
return await delayedLog(3);
}
test1().then(val => console.log("finished ", val));
test2().then(val => console.log("finished ", val));
test3().then(val => console.log("finished ", val));
// Output after 1 second:
// 1
// finished 1
// 2
// finished 2
// 3
// finished 3
Without needing to understand how exactly async / await is transpiled to ES5, intuitively, the second example test2
, returning a Promise instead of just the value, looks more like this after conversion:
function test2() {
return Promise.resolve(Promise.resolve(5));
}
However the inner Promise
is automatically unwrapped, so in the end it again returns just a single Promise
resolving to 5
.
The way to use any of these functions is the same.
Originally published at https://cmichel.io
Source: https://javascript.info/async-await
I'm in the first group :)
Hi, @cmichel, thank you for programming remind.bot. I used it for the first time and it's perfect!
However, my upvote to the poor bot's comment is not much use, since my vote is beneath the dust threshold. You might consider using @dustsweeper for the bot, so that little votes like mine add up to something.
Cheers!