(okay, I'm done...)
In JS what are they? If you're a beginner in JS you already should have some knowledge of callbacks and how they work. If not let me know and I can make a blog post on these as well.
Well, MDN defines a Promise as:
The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
Ok, those are some words. Let me give an example of a basic
Promise and then kind of go over what it means.
This is a really basic promise. Basically what we are doing here is saying "hey when this promise gets
resolved, we are going to print out
hello there. Easy, right? But why would I use a Promise for this, when I can just do:
Promises aren't really needed or used for something like this. So what are they used for?
Promises are used to wrap asynchronous functions (like HTTP requests) and give its result in a synchronous manner
Yes yes, we all know that JS is asynchronous, but if we don't have something like promises, we'll be doing what in the JS community we like to call 🔥🔥 CALLBACK HELL 🔥🔥. Callback hell is when you are calling many functions whose results come in the form of a callback with an argument as a value... something like this:
YIKES. What a mess. This is how we used to have to write JS! This simplified version below uses Promises.
As you can see we wrap the existing async
fs.readdir function in a Promise and once
fs.readdir has completed, we get the result via
resolve is just a fancy way of using
return in a
Promise. It basically says "hey here's the data you are looking for, I'm going to return this in the callback.
reject is similar, but will only print out the
err when the you put a
.catch method at the end of the chain. Let's take a look at what that would look like:
So what just happened? A few things, as mentioned in the code comments:
- We initially make the
fetchcall with the URL as its parameter. This kicks off an
asyncfunction that will return a
Promiseand "resolves" as a
Responsetype (more on that here).
- Once that
resolves, we want to use
thento get the
- With the
responseobject, we now want to make this response into a JSON format. Thus, we call
response.json(). We'll set this to a variable, so we can use it in the next line.
response.json()has completed, we use the final
thento print out the JSON
bodythat we are looking for.
and ta da! You get this as a result:
Honestly, this is broken down a bit much. Usually for a simple
fetch request, you can shorten it with chaining like so:
And that's it! Promises provide a great alternative to Callback hell and are great for async functions of any kind.
With ES6, the introduction of
await has made Promises even easier than before! I'll probably do a separate blog post on this, but in essence instead of doing:
then needed! This is some nice syntactic sugar that JS provides now so we can write our code more linearly like many synchronous languages can do. It's incredibly useful and you'll see most promises written in this way.
Anyway, I hope this helps you understand how promises work. Let me know if you have any questions! Thanks for reading 😄