What does Asynchronous mean?
// Synchronous Code console.log("One"); console.log("Two"); console.log("Three"); // Output One Two Three
The above code is synchronous, i.e. it executes one job/line after another and so on. But, there are some tasks that can take variable time, such as performing a complex calculation, uploading a file, or downloading data from the server. These tasks don’t fit well in between the synchronous tasks.
For example, in the code below, we are trying to get a name from the server and display it immediately. Printing/displaying the name is a synchronous task i.e. it happens immediately but to get the data from the server it can take some time and the correct way to handle this situation is to wait for the data to arrive and then print it out.
// Synchronous execution const name = getNameFromServer(); console.log(name); // Undefined // Asynchronous execution const name = getNameFromServer(); // wait for server response console.log(name); // John Doe
Just wait for async tasks to finish?
Okay, this sounds fair, why can’t we wait for all asynchronous tasks to finish and then execute the rest of the synchronous code?. Let’s see what happens when we visit a website, and how all the resources load in the background.
// Resources loading for a website loadButtons(); loadVideos(); loadImages(); // Now the site is ready
Suppose the buttons are loaded instantly and then the time taken to load the video or image might take a while until then the user is shown a blank page and in the worst case, some resources might fail to load. This inconsistency in time should be handled carefully, or else everything will result in a huge mess.
Handling asynchronous tasks
We must wait for the asynchronous task to complete but meanwhile continue other possible synchronous tasks. One of the real-world examples is when we see a loader that our search results are loading or the form is being submitted.
The real problem
We can wait for an asynchronous task to finish, but we might want to do something else after the asynchronous task is finished or at least know when an asynchronous task has been completed. Suppose, I want to update the username on a web page and once I receive a confirmation from the backend server, only then I can let the user know that the change has been made successfully.
The concept of promise
Let’s start with a simple story. I promise you that I’ll give you candy 🍬. Now, there are three possibilities,
- I give you the candy and keep my promise
- I fail to give the candy and break my promise
- I am in the process of going to the shop to get you candy.
Similarly, a promise can exist in three states
- Fulfilled (successful)
- Rejected (failed)
- Pending (processing)
Real-world promise usage
Modern web development revolves around the concept of async because thinking and programming in async is the main pillar to abstract all the work happening in the background and make sure operations are performed in the desired order. I hope through this article you are able to understand how a promise works. Where do you think you can integrate promises in your next project?