To understand how asynchronous code works with promises, let's first
look at how we can think about these promises.
Here's a great definition from the MDN Docs,
which you can get from the link in the bottom corner.
The promise represents the eventual completion or failure of an
asynchronous operation and its resulting value.
Examining this, the eventual completion is the important
part here because it could happen right away, or, it
could take seconds, or minutes, hopefully not, to either fail or complete.
So that's our asynchronous part,
the eventual part, and the resulting value is what
we're going to get when it comes back.
So what's the shape of a promise?
Promises look kind of like this.
The first rectangle we make a promise to go get maybe a list of heroes,
and then after that when it's done, then, we go get something else,
and then we wait for that to finish and we do something else, and so on.
So we've talked about promises on the higher level, let's explore
the key terminology that you'll need to know.
First,
there's a term called fulfilled, when the promise is made and
it succeeds, this is called being fulfilled.
You'll also hear this talked about as resolved.
That's because we use the resolve keyword or parameter
on the promise to fulfill a promise.
This is the success path, and where there is a success path,
there's also a failure path. Rejected means that the promise failed.
So fulfilled means it worked, rejected means it failed.
Well what happens before those things happen,
meaning, during that eventual part?
This means the promise is pending.
So if the promise is not yet fulfilled or rejected,
that means it's pending, and then once it is fulfilled or rejected,
it's called settled or done.
The ones you hear most often are fulfilled and rejected,
and that's what we're going to focus on mostly. Let's take
a look at the prototype methods where the key words then,
and catch, and finally appear.
The then prototype method is what we're going to use
to append a fulfillment handler, and it always returns a new promise.
When do we use then? We use that when we want to call another
asynchronous operation, so after we get the heroes,
then we get the orders, and when that's done,
then we show the hero.
We also have an error handling mechanism.
This is the catch.
This will append a rejection handler.
So in this case, we could say okay,
something failed up there, let's show an error message.
What if you want to do some clean up at the end?
The prototype method for finally will append a handler,
and it's always called,
and this is a place that we can use something like
a progress bar and turn it off.
What you're seeing right here is called chaining, promise chaining.
We can chain the different promises together, so we can go get my heroes,
then get the orders,
then show the hero, we can use a catch to handle the errors, and then finally,
regardless of whether it works or not, let's turn off the progress bar.
Now you know the key terminology,
the shape of the promise, and the prototype methods. Let's dive in and create some promises.