Consider this code:
async function load() { const data = await new Promise(resolve => { setTimeout(() => resolve([1, 2, 3]), 10); }).then(data => data.map(i => i * 10)); console.log(`Data inside the function: ${JSON.stringify(data)}`); return data; } function main() { const data = load(); console.log(`Loaded data: ${JSON.stringify(data)}`); } main();
This is the output I'm getting:
Loaded data: {} Data inside the function: [10,20,30]
But if I change the code to this:
async function load() { const data = await new Promise(resolve => { setTimeout(() => resolve([1, 2, 3]), 10); }).then(data => data.map(i => i * 10)); console.log(`Data inside the function: ${JSON.stringify(data)}`); return data; } async function main() { const data = await load(); console.log(`Loaded data: ${JSON.stringify(data)}`); } main();
I'll get this:
Data inside the function: [10,20,30] Loaded data: [10,20,30]
I'm confused because based on the documentation, await
should pause the execution till the promise is resolved. In which case, the first example should return data
as an array. But as you can see, it's returning a Promise
and I have no idea why!?
At the same time, the documentation has this part which I don't understand what it is talking about:
An await can split execution flow, allowing the caller of the await's function to resume execution before the deferred continuation of the await's function. After the await defers the continuation of its function, if this is the first await executed by the function, immediate execution also continues by returning to the function's caller a pending Promise for the completion of the await's function and resuming execution of that caller.
It seems to me the await
is working only if all of the functions in your code are async
which is ridiculous since if I'm using a function from another module, how should I know if it's an async
or not!? Or maybe I should take the cautious side and always call all the functions with an await
regardless of whether they are async
or not!!!
[UPDATE]
Thanks to everyone participating and providing me with insight. But I'm still confused how should I be using await
and async
. Should I always call all of my function with an await
?
Let's say I'm writing a code composed of multiple functions within multiple files. If I end up using a library which returns a Promise
or it's an async
function, should I trace back all my function calls from the asynchronous point to the entry point of the application and add an await
before all the function calls after making them async
? Or maybe I should just get into the habit of calling all my functions with an await
regardless of whether they are async
or not?
Use of async and await enables the use of ordinary try / catch blocks around asynchronous code. Note: The await keyword is only valid inside async functions within regular JavaScript code. If you use it outside of an async function's body, you will get a SyntaxError .
This rule applies when the await operator is used on a non-Promise value. await operator pauses the execution of the current async function until the operand Promise is resolved.
Inside an async function, you can use the await keyword before a call to a function that returns a promise. This makes the code wait at that point until the promise is settled, at which point the fulfilled value of the promise is treated as a return value, or the rejected value is thrown.
All async
functions return a promise. All of them.
That promise will eventually resolve with whatever value you return from the async function.
await
only blocks execution internal to the async
function. It does not block anything outside of the function. Conceptually, an async function starts to execute and as soon as it hits an await
instruction, it immediately returns an unfulfilled promise from the function and the outside execution world gets that promise and continues to execute.
Sometime later, the internal promise that was being await
ed will resolve and then the execution of the rest of the internals of the function will continue. Eventually the internals of the function will finish and return a value. That will trigger resolving the promise that was returned from the function with that return value.
FYI, there's a lot of superfluous stuff in your load()
function. You can change it from this:
async function load() { const data = await new Promise(resolve => { setTimeout(() => resolve([1, 2, 3]), 10); }).then(data => data.map(i => i * 10)); console.log(`Data inside the function: ${JSON.stringify(data)}`); return data; }
to this:
function load() { return new Promise(resolve => { setTimeout(() => resolve([1, 2, 3]), 10); }).then(data => data.map(i => i * 10)); }
Then, use it like this:
load().then(result => { console.log(result); });
Or, I prefer to encapsulate the manual creation of promise in their own function like this:
function delay(t, v) { return new Promise(resolve => { setTimeout(resolve.bind(null, v), t); }); } function load() { return delay(10, [1, 2, 3]).then(data => data.map(i => i * 10)); }
And, it turns out this little delay()
function is generally useful in lots of places where you want to delay a promise chain.
Thanks to everyone participating and providing me with insight. But I'm still confused how should I be using await and async.
First off, most of the time you only mark a function async
if you need to use await
inside the function.
Second, you most commonly use await
(from within an async
function) when you have multiple asynchronous operations and you want to sequence them - often because the first one provides a result that is used as input to the second. You can use await
when all you have is a single asynchronous operation, but it doesn't really offer much of an advantage over a simple .then()
.
Here are a few examples of good reasons to use async/await
:
Sequencing multiple asynchronous operations
Imagine you have getFromDatabase()
, getTheUrl()
and getTheContent()
that are all asynchronous. If any fails, you would want to just reject the returned promise with the first error.
Here's how this looks without async/await:
function run() { return getFromDatabase(someArg).then(key => { return getTheURL(key); }).then(url => { return getTheContent(url); }).then(content => { // some final processing return finalValue; }); }
Here's how this looks with async/await
:
async function run(someArg) { let key = await getFromDatabase(someArg); let url = await getTheURL(key); let content = await getTheContent(url); // some final processing return finalValue; }
In both cases, the function returns a promise that resolves with the finalValue so these two implementations are used the same by the caller:
run(someArg).then(finalValue => { console.log(finalValue); }).catch(err => { console.log(err); });
But, you will notice that the async/await
implementation has more of a serialized, synchronous look to it and looks more like non-asynchronous code. Many find this easier to write, easier to read and easier to maintain. The more processing you have between steps, including branching, the more advantages accrue to the async/await
version.
Automatically catching both rejected promises and synchronous exceptions
As I said earlier, async
functions always return a promise. They also have to built-in error handling that automatically propagates errors back to that returned promise.
It goes without saying that if you manually return a promise from the async
function and that promise rejects, then the promise returned from the async
function will reject.
But also, if you are using await
and any promise you are awaiting rejects and you don't have a .catch()
on the promise and don't have a try/catch
around it, then the promise the function returns will automatically reject. So, back in our previous example of this:
async function run(someArg) { let key = await getFromDatabase(someArg); let url = await getTheURL(key); let content = await getTheContent(url); // some final processing return finalValue; }
If any of the three promises that are being await
ed reject, then the function will short circuit (stop executing any more code in the function) and reject the async returned promise. So, you get this form of error handling for free.
Then lastly, an async
function also catches synchronous exceptions for you and turns them into a rejected promise.
In a normal function that returns a promise such as we had earlier:
function run() { return getFromDatabase(someArg).then(key => { return getTheURL(key); }).then(url => { return getTheContent(url); }).then(content => { // some final processing return finalValue; }); }
If getFromDatabase()
throws a synchronous exception (perhaps triggered because someArg
is invalid), then this overall function run()
will throw synchronously. That means that for the caller to catch all possible errors from run()
, they have to both surround it with a try/catch
to catch the synchronous exceptions and use a .catch()
to catch the rejected promise:
try { run(someArg).then(finalValue => { console.log(finalValue); }).catch(err => { console.log(err); }); } catch(e) { console.log(err); }
This is messy and a bit repetitive. But, when run()
is declared async
, then it will NEVER throw synchronously because any synchronous exception is automatically converted to a rejected promise so you can be sure you are capturing all possible errors when it's written this way:
async function run(someArg) { let key = await getFromDatabase(someArg); let url = await getTheURL(key); let content = await getTheContent(url); // some final processing return finalValue; } // will catch all possible errors from run() run(someArg).then(finalValue => { console.log(finalValue); }).catch(err => { console.log(err); });
Should I always call all of my function with an await?
First, you would only ever use await
with a function that returns a promise as await
offers no usefulness if the function does not return a promise (just adding to the clutter of your code if not needed).
Second, whether you use await
or not depends upon the context of both the calling function (since you HAVE to be in an async
function to use await
and on the flow of logic and whether it benefits from using await
or not.
Places where it's pointless to use await
async function getKey(someArg) { let key = await getFromDatabase(someArg); return key; }
The await
here isn't doing anything useful. You're not sequencing multiple async operations and you're not doing any processing on the return value. You can accomplish the exact same code by just returning the promise directly:
async function getKey(someArg) { return getFromDatabase(someArg); }
And, if you know that getFromDatabase()
never throws synchronously, you can even remove the async
from the declaration:
function getKey(someArg) { return getFromDatabase(someArg); }
Let's say I'm writing a code composed of multiple functions within multiple files. If I end up using a library which returns a Promise or it's an async function, should I trace back all my function calls from the asynchronous point to the entry point of the application and add an await before all the function calls after making them async?
This is a bit too general of an ask that's hard to answer in a general case. Here are some thoughts along this general direction:
Once any part of your result that you're trying to return from your function A()
is asynchronous or uses any asynchronous operation to obtain, the function itself is asynchronous. In plain Javascript, you can never return an asynchronous result synchronously so your function must use an asynchronous method to return the result (promise, callback, event, etc...).
Any function B()
that calls your asynchronous function A()
that is also trying to return a result based on what it gets from A()
is now also asynchronous and also must communicate its result back using an asynchronous mechanism. This is true for a function C()
that calls B()
and needs to communicate back its result to the caller. So, you can say that asynchronous behavior is infectious. Until you reach some point in the call chain where you no longer need to communicate back a result, everything has to use asynchronous mechanisms to communicate the result, error and completion.
There's no specific need to mark a function async
unless you specifically need one of the benefits of an async
function such as the ability to use await
inside that function or the automatic error handling it provides. You can write functions that returning promises just fine without using async
on the function declaration. So, "NO" I don't go back up the call chain making everything async
. I only make a function async if there's a specific reason to do so. Usually that reason is that I want to use await
inside the function, but there is also the automatic catching of synchronous exceptions that get turned into promise rejections that I described earlier. You would not generally need that with well behaved code, but it is sometimes useful with poorly behaved code orcode with an undefined behavior.
await
is also only used when there's a specific reason for it. I don't just automatically use it on every function that returns a promise. I've described above reasons to use it. One can still use .then()
just fine for processing the result from a single function call that returns a promise. In some cases, it's just a matter of personal style whether you want to use .then()
or await
and there is no particular reason it has to be one one way or the other.
Or maybe I should just get into the habit of calling all my functions with an await regardless of whether they are async or not?
Absolutely NOT! First off, the last thing you want to do is to take perfectly synchronous code and unnecessarily make it asynchronous or even make it look asynchronous. Asynchronous code (even with async
and await
) is more complicated to write, debug, understand and maintain than synchronous code so you would never want to unnecessarily make synchronous code into asynchronous code by adding async/await
into it:
For example, you would never do this:
async function random(min, max) { let r = await Math.random(); return Math.floor((r * (max - min)) + min); }
First off, this is a perfectly synchronous operation that can be coded like this:
function random(min, max) { let r = Math.random(); return Math.floor((r * (max - min)) + min); }
Second off, that first async
implementation has made the function a lot hard to use as it now has an asynchronous result:
random(1,10).then(r => { console.log(r); });
Instead of just the simple synchronous use:
console.log(random(1,10));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With