Promise
Promises were invented to solve the problem of callback hell and to better handle our tasks.
This is how a promise looks:
illustration of a promise format
Let's dissect promises together.
An illustration of the life of a promise
As the above charts show, a promise has three states:
Pending: This is the initial stage. Nothing happens here. Think of it like this, your customer is taking their time giving you an order. But they haven't ordered anything yet.
Resolved: This means that your customer has received their food and is happy.
Rejected: This means that your customer didn't receive their order and left the restaurant.
We need to understand four more things first ->
- Relationship between time and work
- Promise chaining
- Error handling
- The .finally handler
Let's start our ice cream shop and understand each of these concepts one by one by taking baby steps.
Relationship between time and work
If you remember, these are our steps and the time each takes to make ice cream"
Chart contains steps to make ice cream
For this to happen, let's create a variable in JavaScript:
Now create a function named order and pass two arguments named time, work and we're gonna make a promise to our customer, "We will serve you ice-cream" Like this ->
Our promise has 2 parts:
- Resolved [ ice cream delivered ]
- Rejected [ customer didn't get ice cream ]
Let's add the time and work factors inside our promise using a setTimeout() function inside our if statement. Follow me 👇
Note: In real life, you can avoid the time factor as well. This is completely dependent on the nature of your work.
Now, we're gonna use our newly created function to start ice-cream production.
Promise chaining
In this method, we defining what we need to do when the first task is complete using the .then handler. It looks something like this 👇
Illustration of promise chaining using .then handler
The .then handler returns a promise when our original promise is resolved.
Let me make it simpler: it's similar to giving instructions to someone. You tell someone to " First do this, then do that, then this other thing, then.., then.., then..." and so on.
- The first task is our original promise.
- The rest of the tasks return our promise once one small bit of work is completed
Note: don't forget to write the return word inside your .then handler. Otherwise, it won't work properly. If you're curious, try removing the return once we finish the steps
Using the same system, let's finish our project:
// step 1
order(2000,()=>console.log(${stocks.Fruits[0]} was selected))
// step 2
.then(()=>{
return order(0000,()=>console.log('production has started'))
})
// step 3
.then(()=>{
return order(2000, ()=>console.log("Fruit has been chopped"))
})
// step 4
.then(()=>{
return order(1000, ()=>console.log(${stocks.liquid[0]} and ${stocks.liquid[1]} added))
})
// step 5
.then(()=>{
return order(1000, ()=>console.log("start the machine"))
})
// step 6
.then(()=>{
return order(2000, ()=>console.log(ice cream placed on ${stocks.holder[1]}))
})
// step 7
.then(()=>{
return order(3000, ()=>console.log(${stocks.toppings[0]} as toppings))
})
// Step 8
.then(()=>{
return order(2000, ()=>console.log("Serve Ice Cream"))
})
Result :
Error handling
We need a way to handle errors when something goes wrong. But first, we need to understand the promise cycle:
An illustration of the life of a promise
To catch our errors, let's change our variable to false.
Which means our shop is closed. We're not selling ice cream to our customers anymore.
To handle this, we use the .catch handler. Just like .then, it also returns a promise, but only when our original promise is rejected.
A small reminder here:
- .then works when a promise is resolved
- .catch works when a promise is rejected Go down to the very bottom and write the following code
Just remember that there should be nothing between your previous .then handler and the .catch handler.
A couple things to note about this code:
The 1st message is coming from the reject() part of our promise
The 2nd message is coming from the .catch handler
How to use the .finally() handler
There's something called the finally handler which works regardless of whether our promise was resolved or rejected.
For example: whether we serve no customers or 100 customers, our shop will close at the end of the day
Break Time!
Top comments (0)