Whether you plan on doing anything asynchronously or not, it's a nice little golden nugget to have the knowledge of how to it in JavaScript. An answer to the async problem comes in the form of promises.
JavaScript promises are basically objects that represent the success or failure of some code that's been executed asynchronously. This might not sound like that big of a deal because it's one of those subtle issues that happen in JavaScript.
Using event listeners was one way to watch out for async operations, but there are times the listeners will trigger too early and the event will happen incorrectly. That's where promises come in.
They aren't anything new, they have just been refined. JavaScript promises have been around in some form of API for years. Even jQuery has something comparable called deferreds although they don't work quite the same.
The problem that promises solve is the issue of executing code at the right time after another operation has completed. For example, when you see the loading wheel on a website a bunch of things are happening in the background. There are probably some database calls going on or some calculations being run to determine which content to show on the page.
When all of that background stuff finishes, you'll either see the screen you were waiting for or an error. That's where promises come in. A promise will wait for all of that background stuff to finish with their individual timings and then it will execute the appropriate code.
So after all of the operations have finished, the promise will return a result of either success or failed. Depending on how you want your code to work, you can set up callback functions to handle the success or fail cases. That way you can be sure of what will happen on the screen for a user regardless of what happens on the back-end.
A promise will also catch all of the errors that happen in the chain leading up to a failure which will be useful for debugging. Probably the most notable feature of JavaScript promises you'll hear about is how they are "thenable".
This literally means you can slap the then() method at the end of a promise and run completely new async processes using the results. You can chain as many of them together as you need and they will all run the code asynchronously.
Here's a picture of what promises look like:
As you can see in this example, the promise won't do anything until all of the tasks it's waiting for are done. Then it executes a callback that uses the results of those tasks. Then you can use then() to continue the process using some other tasks.
Whew! Those are JavaScript promises in a nutshell. Unlike some of the other concepts like polymorphism and inheritance, promises are harder to explain without using code but hopefully you have a better high level understanding of how they work, what they are used for, and why we use them.
Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding
Top comments (2)
Thank you, nice explanation of promises. Maybe it would be also good to add few code snippets demonstrating the usage. But, once again good work 😀
Good explanation. Thanks Milecia!