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