Watch this on my Youtube Channel!
I promise that you will be able to understand Promise after this.
When you promise to give your little brothers/sisters a candy, you don’t always give it on the spot, do you? You do it later (or sometimes forget about it 😛).
Promises in Javascript are the same. In short, Promises are objects that contain operations to be executed at a later time. Promises objects ‘promise’ to return you something back when they are actually executed, and that’s why they are call Promise!
Prerequisite
- Understanding of Object Orientated Programming in Javascript.
Show me some code
Let’s take a look at axios, a popular HTTP client library based on Promise.
// axios methods will return us a promise
// line below will perform a get request on myapi.comlet getRequestPromise = axios.get('https://myapi.com/users?id=1')
This is a Promise in action. The get() method will return a Promise object. Axios promises us to perform a GET request on the url specified. We keep this promise as a variable called getRequestPromise.
When Javascript reads the above, the promise will not be executed (or resolved) immediately. In fact, Javascript will put the Promise in a queue (aka the Event Loop) which is to be executed later.
Since Promises will promise to give us something back in the future, Javascript allows us to attached a ‘then’ method to handle that future gift. Plus, a ‘catch’ method to handle errors (if any).
getRequestPromise.then(function(response){ // handle the response for the get request}).catch(function(error){ // handle error
}).then(function(){ // you can chain the then function indefinitely.
// each then will be executed when the previous then is resolved.
// NOTE: these then method will each return a Promise object
// respectively. That's why we can keep chaining them.})
How does Promise work behind the scene?
To create a Promise we need to call the built-in Javascript Promise class. Then, we pass in a function that execute the promise. Read the code below for more details:
Async and Await: Icing on the code
Is there any simpler way to make a Promise? Sure is.
- If we add the
asynckeyword before the function, the function will return a Promise object.
Is there anyway to grab the response of a Promise without using the then method? Yess!
- Just put the
awaitkeyword before a Promise Object to get the response directly.
Can you show me the code please? Okay.
Caveat
- You can only use the
awaitkeyword inside an async function. - Using
awaitwill make a Promise synchronous. That means Javascript will not put the Promise into the Event Loop.
Promise vs Callback
We are all familiar with callbacks. In short, callbacks are functions that to be triggered after an asynchronous task is finished. Although callbacks are great, there is one particular issue: Introducing Callback Hell.
Let’s look at an example: making AJAX calls. Let’s say we want to make 2 consecutive AJAX calls, where the second call is dependent on some data from the first AJAX. We’d pass it in the callback function of the first AJAX. Great.
But what if we want to make more than 2 consecutive calls, say 5?? Should we pass the AJAX calls in the previous callback function respectively?
Hmm..If you are doing it this way, you will be seeing something like this:
What should we be doing instead?
Use Promise 😄! We can pass data to the next then using the await keyword!
axios.get('https://myapi.com/users?id=1')
.then((response) => {
return await axios.get('https://myapi.com/posts?user_id=' response.user.id) })
.then((post) => {
// carry on from here // we didn't need to go through callback hell anymore
// now we can keep our code away from nesting })
And that’s Promise in a nutshell.
