What are promises? Well, what is anything essentially in javascript? (Hint: it starts with an "O"). Hopefully by now you've guessed it. If not, then spoilers ahead. Promises are considered objects at its core! Promises are objects that hold our data. More specifically, they hold the data returned from asynchronous function calls. Once these calls take place, the promise object "promises to respond" once the calls are complete. In other words, we have the assurance of guaranteed responses with promises if they're set up correctly.
SO, why promises? Well, for starters JavaScript is considered a single threaded language. Meaning, that the interpreter reads our code line by line, aka "synchronously". But what happens if we're super awesome web developers and we need multiple things to work at once for our websites? Would synchronous functionality save the day? Nah. We need the ability to have multiple functions running at the same time. Enter the idea of callbacks. Callbacks, are just functions passed as arguments for other functions. Without callbacks, we simply cannot develop. We need functions to trigger after one another in order to become asynchronous. However, as great as callbacks are , there is a huge downside to it's typical use. When you're trying to handle a big asynchronous task within your app, having nested function calls can become a pain to read! And if we can't read our own code, then surely another developer would encounter that same issue. The term for having a ton of nested callbacks "Callback Hell". The reason it's considered a hell is because code has to be legible for us humans in order to tackle any tasks.
With promises, the intent behind it is to reduce callback hell while gaining other benefits as well! Besides promises being asynchronous, they also have a simple execution pattern. Promises allow for the term "chaining". This means, that instead of defining your typical function using the "function" keyword as a callback, we can just add another method to the promise object that's returned from the call.
There are three states to a promise, pending, fulfilled, or rejected. The pending state means the promise’s outcome hasn’t yet been determined because the asynchronous operation that will produce its result hasn’t completed yet.The fulfilled state, well simply means the asynchronous operation that produced the result, worked! Whereas the rejected state means that something went wrong somewhere. The fulfilled and rejected states are really your responses that you get back from promises.
Let's say we we're creating an asynchronous function to do something. In english, we would say, "Hey function, I need you to do something! Oh, then after that, I need you to do something else. Oh! and then right after that, I need you to do something else! But while you're doing those things, please catch any mistakes you might make. Thanks" This is how that would normally look.
However, since promises "promise" data back, we know we can attach callbacks to the function. Wouldn't it be nice to actually read the code almost the same way as we would read it in english? Well lucky for us, there's a built in promise method named "then". Using the .then() method allows for sequences like such to continue without taking so much computer, and brain space. The ".then()" is a method on a Promise that takes the result of that Promise and passes it as the argument for the then function (essentially, a callback function!).
This idea of simplified callbacks is called "chaining", where you just "attach" a method by placing a dot behind the call of the function. The call of the function is an expression, which means it has a result once called. That's why it works that way. Then is the next function, whereas catch is the built in function that "catches" any errors along the way. We could also go even further and make this more legible with es6 syntax.
In conclusion, a Promise is an object representing the eventual completion or failure of an asynchronous operation. Essentially, a promise is a returned object that holds the data we'd like to attach callbacks to.
It can have a resolve(fulfilled) if the function returned successfully, or a reject if function returned an error by chaining methods.
This simple syntax helps reduce callback hell by a ton! However, callback hell can still exist. Large amounts of calls can be hard to read no matter what. Having promises just makes it more legible.
Top comments (0)