This is supposed to be the better way to write promises and it helps us keep our code simple and clean.
All you have to do is write the word async before any regular function and it becomes a promise.
Promises vs Async/Await in JavaScript
Before async/await, to make a promise we wrote this:
Now using async/await, we write one like this:
You need to understand ->
- How to use the try and catch keywords
- How to use the await keyword
How to use the Try and Catch keywords
We use the try keyword to run our code while we use catch to catch our errors. It's the same concept we saw when we looked at promises.
Let's see a comparison. We'll see a small demo of the format, then we'll start coding.
Promises in JS -> resolve or reject
We used resolve and reject in promises like this:
Async / Await in JS -> try, catch
When we're using async/await, we use this format
Don't panic, we'll discuss the await keyword next.
Now hopefully you understand the difference between promises and Async / Await.
The keyword await makes JavaScript wait until a promise settles and returns its result
How to use the await keyword in JavaScript
Let's go back to our ice cream shop. We don't know which topping a customer might prefer, chocolate or peanuts. So we need to stop our machine and go and ask our customer what they'd like on their ice cream.
Notice here that only our kitchen is stopped, but our staff outside the kitchen will still do things like:
- doing the dishes
- cleaning the tables
- taking orders, and so on.
Let's create a small promise to ask which topping to use. The process takes three seconds.
Now, let's create our kitchen function with the async keyword first
Let's add other tasks below the kitchen() call.
We are literally going outside our kitchen to ask our customer, "what is your topping choice?" In the mean time, other things still get done.
Once, we get their topping choice, we enter the kitchen and finish the job
Small note
When using Async/ Await, you can also use the .then, .catch, and .finally handlers as well which are a core part of promises.
We're gonna create two functions ->
- kitchen: to make ice cream
- time: to assign the amount of time each small task will take . Let's start! First, create the time function:
Now, let's create our kitchen:
Let's give small instructions and test if our kitchen function is working or not:
The result looks like this when the shop is closed:
Here's the list of our tasks again:
async function kitchen(){
try{
await time(2000)
console.log(${stocks.Fruits[0]} was selected)
await time(0000)
console.log("production has started")
await time(2000)
console.log("fruit has been chopped")
await time(1000)
console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`)
await time(1000)
console.log("start the machine")
await time(2000)
console.log(`ice cream placed on ${stocks.holder[1]}`)
await time(3000)
console.log(`${stocks.toppings[0]} as toppings`)
await time(2000)
console.log("Serve Ice Cream")
}
catch(error){
console.log("customer left")
}
}
And here's the result: 👇
Top comments (1)
Thank you.