Let us first clarify what these asynchronous stuffs are before we answer the question.
JavaScript is single-threaded, synchronous, and blocking. However, there is a solution for achieving asynchronous in JavaScript. Assume you want to get some information from a source.
Here is an example 👇
What allows this to happen? How does the console.log() statement run without waiting for the script to load if JavaScript is synchronous and blocking? Let’s have a peek under the hood at how the JavaScript engine operates.
Shot from under the hood
The illustration illustrates how things function under the mask. You’ll find there’s a call stack, which follows the first in, last out theory. When an asynchronous code, such as the setTimeout() function, is encountered. The Web APIs are assigned to the function. The timer is started. When the timer expires, the task is transferred to the task queue. We are mindful that the first in, first out maxim applies to queues. The call stack is continuously tracked by the event loop. When it’s empty, it transfers the first task queue item to the call stack, from where it gets executed. In JavaScript, this is how asynchronous is done.
Callbacks
Let’s return to our previous case. But now there’s a new issue. I’d like to use a function from the index.js file.
funcFromIndexJs( ) does not exist at this point as the script is still being fetched behind the scene. We use callbacks to get around this.
Only after the script is loaded the callback function gets called. But what if we have another callback function in the callback function that has another callback function? Isn’t it difficult? This is known as callback hell or the pyramid of doom.
Promises
Promise comes in handy here. A promise is a JavaScript object. Let’s have a peek at the constructor syntax of a promise object. A promise may either resolve or reject.
Consumers
then( ), catch( ), finally( ).
then( ) receives both the result and the error. It then performs some logic and again returns a promise.
cathc( ) receives the error and performs the handling of it.
finally( ) receives both result and error if any. It is used to perform some logic regardless of the result or error.
Chaining
Async/await
Async/await is a simpler syntax to work with promises. Async keyword must be placed before a function definition. It simply implies that a function can always return a promise.
The await keyword causes JavaScript to wait until the promise is settled. The promise can be either resolved or rejected. Only within an async method may we use the await keyword.
Error handling in Async/await
When using the Async/await syntax, we can manage errors with a simple try catch block.
Conclusion
JavaScript is not asynchronous, but achieves it by the use of Web APIs, Task Queues, and Event Loops. We first used callbacks to run a function block that relied on the outcome of an asynchronous code. However, as the scale of the code increases, callbacks become more difficult to use. Then we went to promise land, where a promise object either resolves or rejects with an error. We use consumers like then(result, err) to handle error and result, catch(err) to handle error, and finally() to execute a piece of code regardless. For dealing with promises, async/await is a better syntax. Inside the async function, we use a basic try catch block to handle errors.
References
- JavaScript Info https://javascript.info/
- By A Junior, For A Beginner: The Call Stack & Async Javascript by Nolan E
