Promises, Promises, What is a Javascript Promise?

Introductory Dive into Promises in Javascript

For some reason, Promises in Javascript have been shrouded in some mystery for me. There’s actually quite a lot to them, for this blog I want to demystify what Promises are and dig into what using Promises looks like!

What is a Promise?

Overall, what is a promise in Javascript? To put it plainly, a Promise is an object that represents a fulfilled completion or a failure of an asynchronous operation. (Think this operation may likely be a call to an API)

The nature of Single-thread Javascript

It’s important to note Javascript is indeed single-threaded, meaning it can only complete one action at a time, and there is only one call stack and one memory heap executing code in order, in a synchronous way. Yet because of the recent Javascript engine (V8, etc..), there is a Web API that can handle these asynchronous tasks in the background. If it wasn’t for the engine functionality, the executing function could freeze or possibly quite take a long time, resulting in your program to potentially clam up and be quite slow. Thank you Javascript engines for making our programs into road runners! (for the most part)

Three states of a Promise:

•pending: initial state, no fulfillment or rejection has occurred yet.

•fulfilled: the operation was completed successfully

•rejected: operation failed

Here’s a look at the cycle of promise.

Let’s say we go ahead and make a data request to a server, it will be pending until we receive said data. If we get the data from the server our promise object will result as resolved succesfully! On the flip side, if for some reason we don’t get the data we requested, our Promise will be in a rejected state.

Chaining Promises

One big benefit of using Promises is that we can chain Promises, here in this situation we will utilize using the methods .then() & .catch(). Using chained Promises can be an alternative to using many callback functions, and therefore allow us to avoid callback hell(think way too many function calls, and messy code). Instead, we can attach our callback functions to our Promises, and use .then() to return a fulfilled response and use .catch() to return an unfulfilled response where we will get an error message.

See this Submit Handler function for the use syntax of .then() & .catch()

Conclusion

I hope this gives you some clarity in understanding the basic use of Promises in Javascript & what’s going on under the hood. There is some deeper sleuthing to be done, and look out for that in another blog! Thanks for reading, and hack on!