Asynchronous code is one of the most important and crucial topic in javascript that you NEED to learn.
Async javascript and promises simplified, with real life examples!
: 🧵
0/ In this thread, I'll demystify promises by giving a real life example which you can easily relate and will help you understand them.
Before learning promises we need to learn about async javascript, as every promise is asynchronous.
So let's start with async javascript ⚡
1/ Asynchronous aka async javascript allows us to run multiple tasks at once instead of waiting for one task to finish.
Async code can be really helpful when you're running some time taking functions, for eg when fetching data.
2/ Difference between synchronous and asynchronous:
In synchronous code, we wait for a process to finish running, and then we proceed to the next one.
Async code doesn't block the execution flow, it doesn't wait for the operations to be completed like in synchronous code.
TL;DR:
- Async code is executed in parallel
- Sync code is executed in sequential order
3/ What is a promise?
Promise is an object, which can only return ONE value at a time, not more or less than that.
Now let me simplify this by giving you an real life example; let's say it's my birthday and I promise my friends to give them a party.
So, in this way:
I'm a producing task as I'm preparing the party, booking the place, ordering food and cake, etc; which is generally time consuming.
And my friends are consuming task, as they are dependent on me, the producing task to be done.
And promise is the link between me, the producer and my friends, the consumer.
Likewise happens in javascript, there is a producing function which returns value to some consumer function or variable.
Summary:
⭐ Producer is generally a time consuming function which can only return ONE value
⭐ Consumer is a function or variable dependent on producer to finish executing
⭐ Promises act as a link between producing and consumer process.
4/ And a promise can only be:
• fulfilled - The action relating to the promise succeeded
• rejected - The action relating to the promise failed
• pending - Hasn't fulfilled or rejected yet
• settled - Has fulfilled or rejected
Pretty simple and easy, right? Also, one thing to keep in mind is that *promises are always asynchronous*.
Now, let's see how to use promises in javascript ↓
5/ How to use promises?
We can create a new promise using the `new Promise()` constructor which takes function as an argument, and that function requires resolve and rejects as arguments.
The `giveParty()` function above checks if the user is well or not, if the user is then it will resolve the promise with a message.
Otherwise if user isn't well than it will reject the promise with an error message
Also, it is always a good practice to reject with an `Error`.
6/ Resources I used to learn async js:
1. javascript .info/async-await
2. freecodecamp. org/news/javascript-async-await-tutorial-learn-callbacks-promises-async-await-by-making-icecream
3. web .dev/promises
Async vs sync image inspired from:
4. shreyanshshah91.medium .com
7/ So in this thread we covered:
✅ What's asynchronous javascript?
✅ Differences between sync and async?
✅ What are promises through an real life analogy?
✅ How to use promises?
That's it for this thread and I hope you've found it helpful.
Please like this thread if you've found it helpful & got some value out of it.
Make sure to follow @vedantnn7 for more helpful threads and tweets like this on web development.
Thanks a lot for reading this thread 🙌