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