The Great Escape from Callback Hell
You can find my react.js book on Amazon here. Support is appreciated. -jst
It’s about time you know async and await. You know you wanted to for a long time. But for some reason… you just never got to it.
Only knowing about the keywords: yield, then, async, and await is knowing nothing at all. You want to gain thorough understanding once and for all.
First things first.
Okay. That’s the easy part. Moving forward.
So you’re at a point where you want to make a bunch of HTTP requests. And you decide to tie them all up together into a nice little hierarchy. But there is one more thing you are forgetting…
3. Chained events can quickly turn into an experience of Callback Hell.
This is especially true of events that retrieve JSON from codependent API endpoints via HTTP requests. Specifically, when next callback is blocked by data it must first retrieve from previous endpoint:
4. Promise me it won’t ever happen again.
To battle the problem of syntactical mayhem some wise man created the idea of a Promise. What are the basic principles behind them?
1. Promises provide control over result of a callback: to resolve or to reject.
2. All Promise objects have .then() method attached to them.
5. Promises produce cleaner code.
You cannot sail the ocean until you build the boat.
Let’s make some Promises:
6. Best practice for Promises? (Other than keeping them IRL.)
There are two unique cases when using Promises depends on whether it matters which order events are executed in. Both examples below are considered best practice for each individual case:
7. We can end up in Promise Hell too when Promises are used incorrectly
Not all that shines is gold. Problems arise when Promises are not used as intended. When wrongfully used you can witness the same problem callbacks created earlier:
So how do we get out?
8. Generator ‒ The Iterable Function.
A generator is not a Promise. It is only a control flow construct. They just work with Promises. Generators execute asynchronous events without blocking your code. But make the code look like regular synchronous code!
Along came Bluebird. A Blue Jay? Jay Query? Put that drink down.
In Bluebird, all of what you’ve seen above is already packed into a convenient method coroutine on Promise object. So yes you can tinker with your own generators in great detail. Sort of like car mechanic with his engine modifications. Or you can use Bluebird to start working with generators quickly without worry. Most developers make that choice:
Well you see, generator’s yield is the building block of async. That’s why I waited so long until I got to this point.
I won’t go into details on their differences and similarities here right now. I plan to talk about this in my next article. But…I will just show you the async keyword in action. It’s very similar. Except the syntax is a little different:
You now have a handful of techniques to keep you away from Callback Hell.
You can follow me on GitHub – I follow back!
This article was sponsored by Learning Curve software literature publisher.
For future reading check out React.js Book: From Scratch. (You have to be pretty new to React as the book assumes no previous XP whatsoever.)
Click here for Amazon reviews
Thanks for reading!
I am @js_tut on Twitter.