Promises: Beyond callbacks

Bruno Pineda
sngular-devs
Published in
3 min readMar 9, 2018

Finding the “Holy Grail”

Callbacks

In Javascript the async flow is handle normally by callbacks, like this.

The first problem with callbacks are deficiency: lack of sequentiality and lack of trustability, but by otherside are the famous callback hell.

yes, this make you cry blood.

Promises to the rescue

To describe what is a promise, I like use an analogy that Kyle Simpson wrote:

I walk up to the counter at a fast-food restaurant, and place an order for a cheeseburger. I hand the cashier $1.47. By placing my order and paying for it, I’ve made a request for a value back (the cheeseburger). I’ve started a transaction.

But often, the cheeseburger is not immediately available for me. The cashier hands me something in place of my cheeseburger: a receipt with an order number on it. This order number is an IOU (“I owe you”) promise that ensures that eventually, I should receive my cheeseburger.

So I hold onto my receipt and order number. I know it represents my future cheeseburger, so I don’t need to worry about it anymore — aside from being hungry!

While I wait, I can do other things, like send a text message to a friend that says, “Hey, can you come join me for lunch? I’m going to eat a cheeseburger.”

I am reasoning about my future cheeseburger already, even though I don’t have it in my hands yet. My brain is able to do this because it’s treating the order number as a placeholder for the cheeseburger. The placeholder essentially makes the value time independent. It’s a future value.

Eventually, I hear, “Order 113!” and I gleefully walk back up to the counter with receipt in hand. I hand my receipt to the cashier, and I take my cheeseburger in return.

So… in ahother words a promise is the value future that we needs to continue but while we wait for it, we can do other things.

But how declare a function as promise.

Nice!!, but what happens with errors handler, in a callback we can use the if(err)statement but in a promise we have the catch chain like this.

All errors finally are passed to catch chain and this way we handle the error..

Now imagine that you need wait for many promises to continue, well to do this there are a Promise.all method.

Remember the callback example where we had many nested callbacks?, well this is the equivalent with promises.

Now what happen when i want wait to the first promise resolved, to do this there are Promise.race method.

Promise.race just wait for the first promise resolved to continue with flow.

But.. there are another way to handle a promise?

async / await

With async / await our code keep lineal and we avoid the famous pyramid of doom, well here we go.

Hey wait… another option more before close this reading.

Generators

Generators functions are new feature in ES6 that allow a function to generate many values over time by returning an object which can be iterated over.

Conclusion

The promises help us to keep a lineal code and we can avoid the called callback hell and this make an understandable code, in addition with “async / await” and “generators” features, we can find the “Holy Grail”.

You can practice this here

--

--