"Python Basics (2015)" was retired on June 22, 2018. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Asynchronous Programming with JavaScript!
You have completed Asynchronous Programming with JavaScript!
Preview
Learn a new, easier way to make network requests with the Fetch API.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
ES2015 introduced a more elegant and
friendlier data fetching interface
0:00
that's native to the browser
called the fetch API.
0:04
Fetch uses JavaScript
promises to let you handle
0:07
the results returned from the server.
0:10
In this video, I'll teach you a new
way to network requests with fetch.
0:13
You'll learn how it makes
requesting resources easier.
0:17
Now, I'm not gonna go to deep into the
fetch API in this course because we have
0:20
content here at Treehouse dedicated
to working with the fetch API.
0:24
So be sure to refer to the teacher's notes
to learn a whole lot more about fetch.
0:27
I'm also going to continue
working in the file promises.js.
0:32
If you'd like, you can create a new
file called fetch.js, for example,
0:35
and write the new fetch requests there.
0:39
No matter, what you can always
refer to the project files for
0:41
any of the code written in this course.
0:45
So to make a fetch request,
you use the global fetch method.
0:47
Fetch takes one mandatory argument, the
path to the resource you want to fetch.
0:51
In our eventListener,
I'll start by replacing the call to
0:56
the getJSON function to fetch,
passing it the same URL.
1:01
Now, here's the best part.
1:05
We can actually get rid of the getJSON
function entirely because this
1:07
single fetch method is going to
handle most of these tasks for us.
1:11
The fetch method itself returns a promise,
and once fetch makes the request and
1:21
the data finishes loading,
the fetch promise is fulfilled.
1:26
It's also going to return a response
object containing information about
1:30
the response like the status code and
the corresponding status message.
1:34
In order to access and use the data,
we need to parse it to JSON first.
1:38
So I'll chain a new then
method to fetch and
1:42
pass it a function that accepts
the response via a parameter
1:46
I'll name response and
parses it to JSON with response.json.
1:51
Response.json is going
to read the response and
1:58
returns a promise that resolves to JSON.
2:02
And that's going to get passed
on to getProfiles once resolved.
2:05
Next, the getProfiles
function is also making
2:09
a request to the Wikipedia API
via getJSON.
2:13
So let's change it to use fetch.
2:17
And just like earlier we need
to pass the return data to JSON
2:20
by chaining a then method to fetch and
2:25
passing it a function that accepts
the response and parses it to JSON.
2:29
And that's all there is to it.
2:39
Promise.all is going to
work exactly as before,
2:40
it's going to wait on all of
the individual fetch requests.
2:43
Then join them into one return value when
all the fetch promises are fulfilled.
2:47
Let's test our code.
2:52
I'll refresh the page,
click the button, and
2:53
everything works just like before, good.
2:56
It's usually best to handle errors and
fetch requests or
3:02
any promise sequence as high
up in the chain as possible.
3:05
For example,
3:08
you could handle an error in the Wikipedia
fetch separately by chaining a catch
3:09
method to the fetch sequence that's
higher up in the getProfiles function.
3:14
I'll pass catch a function that takes
the rejection reason as a parameter and
3:19
logs it to the console.
3:25
Just before the error, I'll display
the message Error Fetching Wicki.
3:27
So now, if there's ever an issue
fetching the Wikipedia data,
3:35
we'll know exactly where it's happening.
3:39
And this is what I meant earlier when
I mentioned that promises provide
3:42
an easier ways to catch
errors in your program.
3:45
Finally, I want to display one other piece
of data to the user, the spacecraft each
3:50
astronaut is on, which is almost always
the ISS or International Space Station.
3:55
The data is available in
the first API call we make to open
4:00
notify under a property named craft.
4:05
So in the getProfiles function
method I'll pull that data out and
4:08
save it in a variable named craft,
with const craft equals person.craft.
4:13
Next I'll need to combine data returned
from two APIs into one object,
4:19
the craft data with
the astronaut profiles data.
4:24
So I'll chain one more then
method to this fetch sequence.
4:27
I'll pass the method a function that
takes the profile data in JSON via
4:33
parameter I'll call profile and
returns an object.
4:37
Inside the object,
I'll use the spread operator to copy all
4:44
the properties from a profile
object on to this new object.
4:49
And in this object,
I'll include the craft property and
4:53
value using the variable craft.
4:57
Finally, in the generateHTML function,
4:59
we'll display the craft data as a span
element just below the profile image.
5:02
Then interpolate the value of
the craft property with ${},
5:11
passing it person.craft.
5:16
Now over in the browser, I'll refresh.
5:21
Click View and good,
5:23
we see each astronaut profile which
includes the spacecraft they're on.
5:25
While promises seem like a clear
improvement over callbacks,
5:36
mainly because they increase
the readability of async code,
5:40
they still do not entirely get rid of
callback functions in your program.
5:43
And that's okay because your code will
likely use callbacks in some way.
5:47
It's the deep nesting that
could cause problems.
5:50
In addition, your promise based program
may require lots of then methods,
5:53
with anonymous functions or function
references to handle each different task.
5:57
That can make your code somewhat confusing
and there's a chance that you still
6:02
may end up writing code that resembles
the pyramid of doom style structure.
6:06
So up next, you'll learn how the async
await syntax in JavaScript further
6:09
simplifies the process of working with
promises, providing ways to make your
6:13
asynchronous code look and behave
a little more like synchronous code.
6:17
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up