OVERVIEW OF PROMISE CHAINING

Handling Promise Chaining in Javascript

How a sequence of asynchronous tasks to be performed one after another, for instance, loading scripts. How can we code it well? Promises provide a couple of recipes to do that.

This article presents how nested promises can be handled by chaining promises by reducing complexity in code. so let’s take a step back and look over the promise once.

Throwback on a promise:

• A promise is an object that returns a value in the future.
• A promise starts in the pending state and ends in either fulfilled state or rejected state.
• Use then() method to schedule a callback to be executed when the promise is fulfilled, and catch() method to schedule a callback to be invoked when the promise is rejected.
• Place the code that you want to execute in the finally() method whether the promise is fulfilled or rejected.

The instance method of the Promise object such as then(), catch(), or finally() returns a separate promise object. Therefore, you can call the promise’s instance method on the return Promise. The successively calling methods in this way are referred to as the promise chaining.

we have a sequence of asynchronous tasks to be performed one after another — for instance, loading scripts. How can we code it well?

Promises provide a couple of recipes to do that.

Nested Promise

In the above code is not idle as we try to perform more asynchronous tasks the more nested and complex the code becomes. In the above figure, code is 2 levels deep while calling divide() function and duplicated .catch () methods are being called which is not idle.

Solution to this is Promise Chaining.

Above code is recreated by chaining syntax by returning new promise form .then() method of 1st level of divide() function. This forms the 1st level of Promise chaining.

Promise-chaining

The idea is that the result is passed through the chain of .then handlers.

Here the flow is:

1. The initial promise resolves in 1 second (*),
2. Then the .then handler is called (**).
3. The value that it returns is passed to the next .then handler (***)
4. …and so on.

As the result is passed along the chain of handlers, we can see a sequence of alert calls: 1 → 2 → 4.

Promise chaining

The whole thing works, because a call to promise.then returns a promise, so that we can call the next .then on it.

When a handler returns a value, it becomes the result of that promise, so the next .then is called with it.

Multiple handlers for a promise

A classic newbie error: technically we can also add many .then to a single promise. This is not chaining.

Multiple handlers for a promise

What we did here is just several handlers to one promise. They don’t pass the result to each other; instead they process it independently.

Output:

10 10 10

In this example, you have multiple handlers for one promise. These handlers have no relationships. They execute independently and also don’t pass the result from one to another like the promise chaining above.

Here’s the picture (compare it with the chaining above):

Multiple handlers

All .then on the same promise get the same result – the result of that promise. So in the code above all alert show the same: 1.

In practice, we rarely need multiple handlers for one promise. Chaining is used much more often.