Javascript Promises

event-driven, non-blocking, single-threaded : These are the common adjectives used to describe javascript and these three terms are very much related to each other, when it comes to understanding the core principles of javascript.

Single threaded roughly means, your application can just do one task at a time. So when your webpage makes a server request to fetch some information, it cannot do any other work on that duration. Say it takes 3 secs to fetch the requested information from the server, your application will not take any other work for these 3 seconds.

But this is not fine. If a user clicks on a button and it doesn’t respond, then it means your app ‘freezes’ for this duration. But that is not how our app works, thanks to non-blocking javascript. In times like fetching external information through network, after sending the request to fetch, javascript will continue with the next job in line. It won’t wait for the response.

But how will javascript know, when the response comes back. And this time we should thank the event-driven javascript. While sending the request to fetch, we will add a listener, which will map the ‘load’ event with a callback function. So once we get the response from the server, our callback function will be called.

We use callbacks freqently, and sometimes repeatedly, in a nested fashion. Take this case. Once the user signs in, we need to fetch the userInfo and based on the userInfo we need to fetch the dashboardInfo. In such case, our code will look something like below.

$.get(“/signin”, {..}, function onSignIn (){ .. $.get("/userInfo", {..}, function onUserInfo(){ .. $.get("/dashboardInfo", {..}, function onDashboardInfo(){ .. } }}

This coding structure looks like an art work: nested and beautiful. But unfortunately we developers hate it for all good reasons. This type of nested callbacks are not good for maintaining the code, testing and bug fixing. This is popularly named as “callback hell”. And also this nested structure put us in disadvantage when we think of refactoring.

The good news is, we don’t have to use it anymore and many have already stopped using it, thanks to Promises. The same code can be written as below. Instead of nested format, we have a linear format.

fetch(“/signin”, {..}).then(function onSignIn(){ .. return fetch(“/userInfo”, {..})}).then(function onUserInfo(){ .. return fetch("/dashboardInfo", {..});}).then(function onDashboardInfo(){})

This way, it wont be a problem when we refactor the code in future, like below.

function signInAndfetchUserInfo(){ fetch(“/signin”, {..}) .then(function onSignIn(){ .. return fetch(“/userInfo”, {..}) })}

signInAndfetchUserInfo() .then(function onDashboardInfo(){ .. })

Note: Async/await is another important concept which is now widely supported. It cannot be considered as an alternative to Promises though it solves the same problem. Mastering both the topics will really pay-off.

Here the objective is, only to highlight the point, why ‘Promises’ are important. There are a lot of good tutorials on ‘Javascript Promises’. Master it and use it everyday.