Let’s say there is an event you will attend this evening. There will be several steps to complete in order to get ready. Such as:
- wash hair
- get dressed
Let’s give each task time roughly as follows:
- wash hair - 5 min
- blow-dry - 20 min
- makeup - 15 min
- manicure - 7 min
- pedicure - 8 min
- get dressed - 3 min
Since I do not want to wait for these operations for minutes, I will use seconds instead of minutes in the setTimeout function.
Okay, seems we achieved making tasks asynchronous but we have another issue now. Check the output and tell me, do you really want to get dressed before washing your hair? Also, if the makeup is completed before blow-drying, heat may affect the makeup. Apart from manicure and pedicure, there are dependent tasks.
Yippee! The order is exactly as we wanted ✨
For basic scenarios, callbacks are quite handy. On the other hand, each callback adds another level of nesting as seen in our example, and once you have a lot of callbacks, the code eventually becomes complicated and hard to debug. Let’s take a look at promises as an alternative to callbacks.
Promises are one approach to avoid callback hell when handling asynchronous code. First, we need to create a promise using the Promise constructor. Also, we need to specify by using resolve and reject callback what we desire to happen when a promise returns successfully or throws an error. This promise will result in either a value that can be a resolved value or a reason for rejection. We will use .then() function to handle the result of the promise, as well as .catch() method to manage any errors.
Let’s say there is no electricity, remove electricity from the code and see what will happen.
In our example, a promise is returned to another promise which is known as a promise chain. When there are several operations, we should add additional then() blocks to the end of each one. Even if our code is no longer nested, it still seems to be difficult to read and debug. Promises were created to resolve the callback hell problem, but they bring syntactic complexity, so understood that promises cannot be the final solution. Let’s have a look at another callback alternative, async-await.
Async-await is simply syntactic sugar for promises since it still uses promises under the hood. The promise is returned by an async function. By prepending await keyword to the function, the caller code will wait until the promise is resolved or rejected before proceeding.
Let’s try to get ready by using async-await:
Only async functions are allowed to use the await keyword.
Overall, we achieved being ready at the end of the day by using three different approaches 🎉 🎉 🎉
Computers are asynchronous by design. Asynchronous means that things can happen independently of the main program flow…
Who can wait quietly while the mud settles?Who can remain still until the moment of action? Laozi, Tao Te Ching The…
Callbacks, Promises and Async/Await
Async JS Crash Course — Callbacks, Promises, Async Await
All the Basics You Need To Know including Callbacks, Promises, and Async/Await