Javascript 106 : Promises

This post is a continuation of "Javascript 105: Callbacks". So If you have not studied the last post please go back and then come back to this. 

As discussed in the last post, a callback is a way to force synchronous (sequential) operation of otherwise asynchronous tasks. Since this is a continuation lets begin from where we left off with the last post. 

Take a look at this code, and its output. 

Output:

 We did that to ensure the statements prints in order

This is okay for situation like this. 

But imagine a code as follows

Output:

Take a look at the code and the output carefully. It is obvious that these statements are printing out of order due to the inherent asynchronous nature of JS. 

If we still want to ensure that they take their own time to execute but still executing the way we want, how do you think that we can make this happen. 

Sure, we can create multiple callback functions and call them inside of each (Which I even do not wish to try), but that will make a very complicated and unmanageable code. That chaotic code style is called "callback hell".  

This is where the "Promises" comes in, which is a more elegant and cleaner approach to this problem.  

A Promise is a way to arrange the operation of asynchronous calls. 

• The promise takes a single input argument and that is a callback function.
• That callback function takes two input arguments. "resolve" and "reject"
• Perform the operation inside the callback function and if it is a success, calls "resolve()"
• If the operation inside is a failure, it calls the "reject()"

Now lets try to come up with a sample promise to clarify whats this all about. 

Output:

In the above test code I have commented out the five setTimeout() function. We are coming back to it later.

1. The line 7 to 16 is a simple promise.  The "promiseDemo" variable is assigned with a new Promise object.
2. The Propmise constructor took two arguments called "resolve" and "reject".
3. From line 8 to 15 is the operation
4. I am calling the "resolve" function with the argument "they are equal" if the operation is successful.
5. I am calling the "reject" function with the argument "they are not equal" if the operation is not successful.
6. On line 19, I am calling the "then" method of the "promisDemo" obejct.
7. "then" method again takes two function definitions as arguments. First one is the definition of the "resolve" function and the second one is the definition of "reject" function 
8. If you change the value of variable "num2" to something other than 100, you should get the output of "they are not equal" since "reject" function is going to fire.

Now lets take this a step further and address the real challenge. First try it yourself and then com back to this solution.

Output:

At line 7, I have implemented a function which accepts the arguments as follows

1. message : the message to print ("statement 01", "statement 02" and so on)
2. thisDelay: how much time the current operation should take
3. nextDelay: how much time the next process should be delayed 

Actually the argument 2 and 3 is only required for this example. In reality, you do not specify how much time the operations should be delayed. For example, and API call will take some time and that process will be delayed by its own. The promise is required to make sure that the next operation is not carried out before the current one. We only need these final 2 arguments only because we are simulating the delay with "setTimeout" function. 

Starting from line 20, these returned promises are chained together to get the desired result. 

Now, regardless of how much time an operation takes, the java interpreter executes them synchronously.