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 Working with the Fetch API!
You have completed Working with the Fetch API!
Preview
Learn an easier way to make network requests and handle responses with the Fetch API. Fetch provides a modern, friendly data-fetching interface that's native to the browser.
Resources
Related Courses and Workshops
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
[MUSIC]
0:00
Most websites and applications
retrieve and send information to and
0:09
from a remote server using JavaScript.
0:13
For example, make a request to an API and
0:15
use the return data to update
the contents of a page.
0:18
Or post data submitted
by a forum to a server.
0:21
You may have heard of, or worked with,
AJAX, or Asynchronous JavaScript and XML.
0:24
AJAX provides a combination of
technologies that give developers a way to
0:28
send and receive data asynchronously,
in the background.
0:32
Without reloading the page, which makes
your app feel fast and responsive.
0:35
A common way to make AJAX calls and
interact with services
0:39
asynchronously is with
the XMLHttpRequest object, or XHR.
0:43
A JavaScript functionality built into
the browser use to transfer data between
0:48
the browser and a web server.
0:53
Well not only can XHR be a little too
complex to write, read and remember.
0:56
Developers could also end up writing some
pretty messy code to make AJAX calls.
1:00
For example, you may start to see your
code in the dreaded pyramid of dooms
1:03
style, or callback hell structure.
1:07
Which makes following the flow
of your app difficult.
1:09
Developers also have the option of
using jQuery to perform ajax requests.
1:14
jQuery provides a wrapper around
the XMLHttpRequest object
1:19
with a set of tools that make working
with XHR easier across browsers.
1:23
Well, instead of making
requests with XHR or
1:28
loading a large external library
like jQuery into your projects.
1:31
JavaScript now provides a modern and
1:34
friendlier data fetching interface
native to the browser, Fetch API.
1:36
I'm Guil, a developer and
teacher here at Treehouse.
1:41
In this workshop,
I'll teach you how to make ajax calls, or
1:44
a synchronous request using the Fetch API.
1:47
Fetch will completely change how you make
network requests and handle responses.
1:50
Some of the advantages of using the
Fetch API are that it's easy to use and
1:55
understand.
1:59
The API is completely promise-based,
meaning it uses JavaScript promises to
2:00
handle the result you get
back from the server.
2:05
This results in cleaner,
simpler code compared to XHR.
2:07
And Fetch API is built into the browser,
2:11
know having to load an external library
to simplify how you make async requests.
2:14
We're going to create this simple
dog gallery app using the dog API.
2:19
The app fetches a list of dog breeds and
2:23
images from the API, it even uses fetch
to post data submitted by a forum.
2:26
Before we start, I'm going to assume
that you know about JavaScript promises,
2:32
since Fetch is promised space.
2:37
And the basics of how web browsers send
HTTP requests and receive responses.
2:39
So be sure to check the teacher's notes
for links to Treehouse courses and
2:43
workshops that will get you
up to speed with both topics.
2:46
By the end, you will have learned
a new way to make network requests and
2:50
how Fetch makes requesting
resources easier.
2:53
Now, as I'm recording this video, Internet
Explorer does not support the Fetch API.
2:56
Fortunately, GitHub created
a handy fetch polyfill
3:02
that lets you take
advantage of Fetch today.
3:05
And you'll find the link to
the polyfill in the teacher's notes.
3:08
All right, so coming up in the next video,
3:11
we'll get started by writing
a basic Fetch request.
3:13
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