Read on Twitter
Callbacks vs Promises vs Async/Await 
Why are there multiple ways of handling asynchronous operations on JavaScript? And which is better?
And what does synchronous/asynchronous even mean?
Let's talk about this.
#100DaysOfCode #javascript #CodeNewbie #js
Why are there multiple ways of handling asynchronous operations on JavaScript? And which is better?
And what does synchronous/asynchronous even mean?
Let's talk about this.
#100DaysOfCode #javascript #CodeNewbie #js
Synchronous operations.Imagine we go to a restaurant and a waiter takes our order, he takes it to the kitchen, waits for the chef to cook the meal and then brings it to you.
While the chef cooks, the waiter did nothing.
This is called blocking architecture.
Asynchronous operations.On the contrary, asynchronous is non-blocking.
A waiter can take multiple orders and the chef can cook multiple meals at the same time.
So we are interested in async operations and the different ways of handling them.
Callbacks.A callback is a function that is passed as a parameter to another function.
When the first function is done, it will run the second function.
Let's see an example of what could happen in our previous restaurant example.
If we need the data of one of the prior functions, we need to chain them.
This creates what is called "Callback hell".
This can get messy real quick and it can be hard to understand what's going on.
This creates what is called "Callback hell".
This can get messy real quick and it can be hard to understand what's going on.
Promises.A promise represents a value that will be available in the future, we get an immediate response that the server is "working on it", and at some point, we go back to get the real value generated by that promise.
Promises can have different states.
- Pending: initial state, neither fulfilled nor rejected.
- Fulfilled: meaning that the operation was completed successfully.
- Rejected: meaning that the operation failed.
A promise always returns a promise object, which lets us chain then.
- Fulfilled: meaning that the operation was completed successfully.
- Rejected: meaning that the operation failed.
A promise always returns a promise object, which lets us chain then.
Our restaurant example converted to promises.
This gets easier to read because it has a logical order to it.
It still can get messy if we have multiple errors handling after each ".then".
Let's see a cleaner way.
This gets easier to read because it has a logical order to it.
It still can get messy if we have multiple errors handling after each ".then".
Let's see a cleaner way.
Async/Await.Makes your asynchronous code look like synchronous code.
Each line will "await" for the last line to finish.
This is my preferred way of writing code and makes error handling a lot easier. (You can nest try/catch blocks if you need).
In this thread, we learned the differences between Callbacks, Promises, and Async/Await.
Thank you for reading it through and I hope it helps you on your developer journey.
See you on the next thread!
Thank you for reading it through and I hope it helps you on your developer journey.
See you on the next thread!
