Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how to create a promise and get a value out of a fulfilled promise.
Running a JavaScript file with the node command
If you are not able to run the file promises-breakfast.js in your Terminal or console using the command node promises-breakfast.js, you can link the file to index.html then test the output in your browser's console:
<body>
...
<script src="js/promises-breakfast.js"></script>
<script src="js/callbacks.js"></script>
</body>
Resources
Now you're going to learn how to create a
promise and get a result out of a promise,
0:00
then how to chain promises together.
0:05
A promise is always going to be
in one of three possible states,
0:07
pending, fulfilled, or rejected.
0:11
The pending state is like the waiting
state you're in after being handed
0:14
the pager.
0:18
It's the default state of a promise.
0:18
Fulfilled means that the operation
completed successfully.
0:21
And rejected means that
the operation failed.
0:24
Working with promises is
a three step sequence.
0:28
You create a promise instance
using the Promise() constructor.
0:31
You then define what should happen when
the promise is fulfilled or rejected.
0:35
Then call one of the methods provided
by the promise API to either consume
0:40
the value of a fulfilled promise,
or provide a rejection reason for
0:44
a rejected promise.
0:49
Let's see how all of this works.
0:50
In the project,
open the file promises-breakfast.js.
0:52
In this file, let's create a new
promise called breakfast promise
0:56
with const breakfastPromise.
1:01
We create the promise
using the new keyword,
1:03
followed by the Promise()
constructor function.
1:05
The Promise() constructor
takes one argument,
1:10
a callback with two perimeters,
resolve for
1:14
when the promise is fulfilled, and
reject for when it's rejected.
1:18
Within the callback, I'll write an async
task using the setTimeout method.
1:24
I'll pass it a callback and set a delay
value of 3,000 milliseconds, or 3 seconds.
1:30
Our Promise() constructor
function is all set up.
1:38
This function is going to return
a promise object that is either pending,
1:41
resolved, or rejected.
1:46
For example,
if I console.log(breakfastPromise),
1:48
then in the terminal run this file
with node promises-breakfast.js,
1:53
notice how the console outputs a promise
object, which is currently pending.
1:58
And that's correct because pending
is the default state of a promise.
2:04
So now, inside the constructor,
we can either call resolve to
2:09
return a promise object that is
resolved with a given value, or
2:13
reject to return a promise object
that is rejected with a given reason.
2:18
Both of these functions
are provided by the constructor.
2:23
So first, inside setTimeout,
I'll call resolve.
2:26
And resolve does just that, it changes or
2:31
resolves the status of the promise
from pending to fulfilled.
2:33
We can pass resolve a value which
then becomes the fulfillment value of
2:37
the promise.
2:42
For example, I'll pass resolve the string
Your order is ready, come and get it!
2:43
So when the asynchronous task completes
successfully, it's going to return
2:51
a resolved promise object with Your order
is ready, come and get it as its value.
2:56
Running the file again in the console,
3:01
we see that the promise
is in a pending state.
3:04
So now we need to get the value out of the
promise object, or consume the promise.
3:06
To do that, the Promise API offers
methods you can call on the promise.
3:11
The two you'll likely use
most are then() and catch().
3:16
So first,
I'll call then() on our breakfast
3:21
promise with breakfastPromise.then.
3:26
then() can be called to handle both
fulfilled and rejected promises.
3:30
It accepts two functions as its argument,
one for fulfilled promises, and
3:35
an optional one for rejected promises.
3:40
In this case, I'm only calling it
to handle fulfilled promises, and
3:42
later use the catch method
to handle rejected promises.
3:45
So to get the resolved value, I'll pass
then() an arrow function that takes
3:48
the fulfillment value as a parameter I'll
name val, and logs it to the console.
3:54
Now I'll run this file
again in the console,
4:03
we see that the promise is pending.
4:06
Then after three seconds, it resolves to
the value Your order is ready, come and
4:08
get it.
4:13
Good, so after the three second delay, the
promise changes from pending to fulfilled.
4:14
Then the function passed to
then() is immediately invoked,
4:21
which returns the fulfillment value.
4:25
In other words,
whatever we pass the resolve method is
4:28
available to be used here inside then.
4:33
Not all promises are resolved,
so in the next video,
4:36
you'll learn how to handle rejected
promises using the catch() method.
4:39
You need to sign up for Treehouse in order to download course files.
Sign up