JavaScript being adorable with Promises
Pending? Executor? Resolve? Let's learn more about it!
This is one of the cutest concepts of JavaScript. Yep, it does exactly what it says, it promises something and it can either go through with the promise or not but it won't let you pending, why? well, keep reading my friend, you're in for a treat!
You JavaScript
What exactly is a promise?
A promise is a constructor function that returns a value of a resolved or not resolved asynchronous operation.
Promises are extremely useful when you have a process that takes an unknown amount of time, usually used on server requests.
Great! But what does that mean?
Okay so, let's say that you have a newsletter like me pls sign in <3 for your blog, your readers will write in their emails and excitingly wait for a new article of yours to come out, right? They will be informed the second it comes out. It's basically the same.
JavaScript promises are the newsletter, as in they wait for a result (in this case the article you're making that it's going to take time) and the promise makes it available for your subscribers to go check it out when you're done and the article is published.
So now we can imagine that a promise has three states:
- Pending, this is the initial state, it's neither fulfilled or rejected. Let's say it's waiting for you to finish your article.
- Fulfilled, ah! Success!!! Our article is available for everyone to check it out!
- Rejected, meaning something has failed.
Now let's talk syntax.
Since it's a constructor function, it needs the keyword new to be created.
const myPromise = new Promise ((resolve, reject) => {
//some code
});
The function passed to our new Promise is called executor, i know it sounds evil but it's not! It just means that it runs authomatically. This is where the magic happens.
When the executor is done executing the code, it either calls on resolve (if successfull) or on reject (if an error occured).
How would this look like?
const myPromise = new Promise ((resolve, reject) => {
if (this condition is true){
resolve("Yey it worked! Promise fulfilled");
} else {
reject("Something went wrong, promise rejected");
}
});
If it's fulfilled, what do we do?
Fulfilled promise with .then()
The .then() method is called immediately when a promise is fulfilled with resolve.
The syntax is:
myPromise.then(result => {
//code
});
It looks like this
const myPromise = new Promise ((resolve, reject) => {
let condition = true; //example fulfilled
if (this condition is true){
resolve("Yey it worked! Promise fulfilled");
} else {
reject("Something went wrong, promise rejected");
}
});
myPromise.then(result => {
console.log(result)
});
What if the promise is rejected?
Unfulfilled promise with .catch()
The .catch() method on the other hand is called immediately after a promise reject method is invoqued.
Error is the argument passed to this method.
The syntax is:
myPromise.catch(error => {
//code
});
It looks like this:
const myPromise = new Promise ((resolve, reject) => {
let condition = false; //example unfulfilled
if (this condition is true){
resolve("Yey it worked! Promise fulfilled");
} else {
reject("Something went wrong, promise rejected");
}
});
myPromise.catch(error => {
console.log(error)
});
Conclusion
JavaScript promises is one of those concepts that stuck with me while i was learning, specially when you know it's basically just promising you to help you out either if the promise its resolved or not, such a reliable buddy.
I really hope you enjoyed this one and as always thank you SOOOO MUCHHH for reading, my friend.
Don't hesitate to contact me and let me know if you'd like to add something else in the comments.
☕If you enjoy my content Buy me a coffee It'll help me continue making quality blogs💕
💙Follow me on Twitter to know more about my self-taught journey!
💜Make sure to check out more articles on my JavaScript For Newbies Series
❤️ Also subscribe to my Youtube Channel !
🖤And for more content and tips on TikTok !