- What is a Promise? 3:36
- Create a Promise 4:43
- Reject a Promise and Handle Errors 3:25
- Promises Review
- Create a Promise Review 6 questions
- From Callbacks to Promises 5:59
- Handle Multiple Promises with Promise.all 3:35
- Before You Continue
- Perform Cleanup With finally() 2:47
- Using Fetch 6:21
- JavaScript Promises Review 6 questions
Preview
Video Player
00:00
00:00
From Callbacks to Promises
5:59You've learned how to create and consume a promise, as well as how to chain together a sequence of promises, and handle rejected promises. Now you're going to convert parts of the project from callbacks to promises.
You've learned how to create and
consume a promise, as well as
0:00
how to chain together a sequence of
promises and handle rejected promises.
0:03
Now we're going to jump back into
our People in Space project and
0:07
convert parts of it from
callbacks to promises.
0:11
Open the file promises.js.
0:14
In this file,
0:17
you should see code that's very similar to
the code you wrote in the previous stage.
0:18
Remember, a promise is the eventual value
or result of an asynchronous operation.
0:22
So which part of the program is set
to execute at some point later,
0:29
once it has the data it needs?
0:33
Well, in the function getJSON,
the callback function assigned
0:35
to onload is invoked once data
is returned from the API.
0:39
So we can convert this into a promise.
0:43
First, I'll set getJSON to return
a promise using the Promise constructor.
0:45
I'll pass the constructor a callback
with the parameters resolve and reject.
0:52
Then place the body of getJSON within
the Promise constructor callback.
1:00
Next, when the API data loads,
if the status of the response is 200,
1:08
we'll parse that data to JSON.
1:14
And instead of invoking
a callback function here,
1:17
I'm going to call resolve and
pass it the variable data,
1:21
which will change the status of
the promise from pending to fulfilled.
1:26
Else if the status code is
something other than 200,
1:32
I'll reject the promise by calling reject.
1:37
And I'll again use the Error constructor
here to display the stack trace,
1:42
as well as the response status text as
the rejection reason with xhr.statusText.
1:48
This should hopefully provide
a more meaningful error.
1:55
Now you can delete the callback parameter
from the getJSON function signature,
1:58
since it no longer requires
a callback function passed to it.
2:03
Now if at some point there's
a network connectivity issue,
2:07
a status code wouldn't be provided.
2:12
So let's also use the onerror
event handler on the xhr object
2:14
to reject the promise if the HttpRequest
fails due to connectivity issues.
2:20
I'll again pass reject,
the error constructor
2:27
with the message A network error occurred.
2:32
All right, getJSON is now all set
up to return a promise object.
2:37
Next, down in the EventListener,
we still call getJSON,
2:41
but we no longer need to provide
it getProfiles as a callback.
2:46
Instead, we can call then
on the getJSON promise and
2:51
pass it a reference to getProfiles.
2:55
Promises get executed in sequence.
2:59
Each then method that's chained on to the
main promise returns a promise of its own.
3:01
They each get executed sequentially,
once the previous promise is fulfilled.
3:07
In other words, something happens
after something else is resolved.
3:12
So far, this is going to fetch
the data from the open notify API.
3:15
Then if that task is resolved, it's going
to pass the return data down to the then
3:20
method, which is then used in getProfiles
to request data from the Wikipedia API.
3:25
Next, I'll chain another then method
to do something with those results.
3:31
For now, I'll log the data to the console
by passing then a function with
3:36
the parameter data, which represents
the data returned by getProfiles.
3:41
So once the promise is fulfilled,
this handler function will be called
3:47
asynchronously, and it's going to return
a value, the Wikipedia data in JSON.
3:52
Let's not forget to add the catch method
at the end to handle rejected promises.
3:57
I'll pass catch a function that takes
the rejection reason as a parameter and
4:02
logs it to the console.
4:07
Finally, we need to make a few
changes in the getProfiles function.
4:10
First, omit the callback
passed to getJSON.
4:14
Then specify the return keyword,
4:19
since we're now returning a promise
object during each iteration of map.
4:21
Let's also capture the results of the map
operation in a variable named profiles,
4:26
then have the function return profiles.
4:34
Before testing your code in the browser,
4:39
make sure to update index.html to
use the latest JavaScript file.
4:42
Change the source value of the script
tag from callbacks.js to promises.js.
4:46
Over in the browser, refresh.
4:55
Then click the view button, and instead
of seeing the Wikipedia data logged to
4:58
the console, we're getting an array
containing six resolved promise objects.
5:03
And that's correct because it's now
getJSON's job to return a resolved or
5:09
rejected promise.
5:14
In fact, if there's an issue
with the Wikipedia request, for
5:15
example, I'll mistype the URL, we'll
instead see six rejected promise objects
5:20
in the console with the rejection reason,
A network error occurred.
5:27
So instead of six
separate promise objects,
5:36
we need getProfiles to return
a single resolved promise when all of
5:39
the promises from the Map
function have resolved.
5:44
For example, an array containing
the astronaut profile objects,
5:48
we can then pass to
the generateHTML function.
5:52
I'll teach you how to do just that
in the next video with promise.all.
5:54