Preview
Video Player
00:00
00:00
What is the Fetch API?
3:16Learn 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.
[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