'What is meant by 'pause' when async function await expression 'pauses' execution?
I am very new to the concept of asyncronicity in Javascript and I wanted to make sure I am not misinterpreting what I am reading.
Consider this pseudo code in some Angular app:
async ngOnInit() {
this.responseObject = await this.myService.myGetRequest();
//do some more stuff down here
}
My understanding is that the ngOnInit() will 'pause' or stop execution at await, and NOT execute the code below that line until the promise object(data) is returned? Correct?
Solution 1:[1]
await used within an async function awaits the fulfillment of a Promise value or converts the variable to a Promise.
Yes, you are correct the code at next line will not be executed until the previous line which uses await has returned a fulfilled Promise or the value is converted to a Promise.
Note, it is not clear what the pattern
await this.responseObject = await this.myService.myGetRequest();
is expected to achieve. The first await should be able to be omitted
this.responseObject = await this.myService.myGetRequest();
Solution 2:[2]
The async function declaration will return a Promise that is resolved with the returned valued from your function call.
If you add the await expression, it will stop the async execution and wait until your promise is resolve to continue executing the other instructions in your code, somehow making it behave like a 'synchronous' function.
Do some reading over here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
Solution 3:[3]
I feel the two above answers don't answer the core question. What does javascript mean when it says it's awaiting something? Javascript is singly threaded. So, instead of dealing with async itself, it runs all tasks in a separate task queue provided by the "runtime" (usually either the browser or node). When we await a piece of code, we are placing the promise on the task queue, waiting on the promise to finish, and then taking it off the task queue fo code execution to finish. For example, consider the following code block.
setTimeout(() => console.log("Finished Outer Timeout"), 0);
async function asyncCall() {
console.log("Before Await")
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
console.log("Finished Inner Timeout")
resolve('resolved');
}, 2000);
});
}
await resolveAfter2Seconds()
console.log(`After Await`);
}
asyncCall()
If await fully blocked the task queue, we would expect the logging order to be:
- Before Await
- After Await
- Finished Outer Timeout
- Finished Inner Timeout
as the timeouts would have to wait on the task queue for the main script to finish. However, the ordering is:
- Before Await
- Finished Outer Timeout
- Finished Inner Timeout
- After Await
which indicates that the task queue can still run the two timeout functions even when the main script is awaiting. Note there may be differences depending on your browser, but this is generally how Javascript async/await works.
Work Cited:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | guest271314 |
| Solution 2 | bws |
| Solution 3 |