1
00:00:00,000 --> 00:00:09,345
[MUSIC]

2
00:00:09,345 --> 00:00:13,101
Most websites and applications
retrieve and send information to and

3
00:00:13,101 --> 00:00:15,690
from a remote server using JavaScript.

4
00:00:15,690 --> 00:00:18,250
For example, make a request to an API and

5
00:00:18,250 --> 00:00:21,120
use the return data to update
the contents of a page.

6
00:00:21,120 --> 00:00:24,130
Or post data submitted
by a forum to a server.

7
00:00:24,130 --> 00:00:28,900
You may have heard of, or worked with,
AJAX, or Asynchronous JavaScript and XML.

8
00:00:28,900 --> 00:00:32,540
AJAX provides a combination of
technologies that give developers a way to

9
00:00:32,540 --> 00:00:35,970
send and receive data asynchronously,
in the background.

10
00:00:35,970 --> 00:00:39,353
Without reloading the page, which makes
your app feel fast and responsive.

11
00:00:39,353 --> 00:00:43,735
A common way to make AJAX calls and
interact with services

12
00:00:43,735 --> 00:00:48,491
asynchronously is with
the XMLHttpRequest object, or XHR.

13
00:00:48,491 --> 00:00:53,340
A JavaScript functionality built into
the browser use to transfer data between

14
00:00:53,340 --> 00:00:56,050
the browser and a web server.

15
00:00:56,050 --> 00:01:00,260
Well not only can XHR be a little too
complex to write, read and remember.

16
00:01:00,260 --> 00:01:03,418
Developers could also end up writing some
pretty messy code to make AJAX calls.

17
00:01:03,418 --> 00:01:07,489
For example, you may start to see your
code in the dreaded pyramid of dooms

18
00:01:07,489 --> 00:01:09,601
style, or callback hell structure.

19
00:01:09,601 --> 00:01:12,840
Which makes following the flow
of your app difficult.

20
00:01:14,740 --> 00:01:19,490
Developers also have the option of
using jQuery to perform ajax requests.

21
00:01:19,490 --> 00:01:23,940
jQuery provides a wrapper around
the XMLHttpRequest object

22
00:01:23,940 --> 00:01:28,160
with a set of tools that make working
with XHR easier across browsers.

23
00:01:28,160 --> 00:01:31,260
Well, instead of making
requests with XHR or

24
00:01:31,260 --> 00:01:34,940
loading a large external library
like jQuery into your projects.

25
00:01:34,940 --> 00:01:36,700
JavaScript now provides a modern and

26
00:01:36,700 --> 00:01:41,470
friendlier data fetching interface
native to the browser, Fetch API.

27
00:01:41,470 --> 00:01:44,518
I'm Guil, a developer and
teacher here at Treehouse.

28
00:01:44,518 --> 00:01:47,310
In this workshop,
I'll teach you how to make ajax calls, or

29
00:01:47,310 --> 00:01:50,020
a synchronous request using the Fetch API.

30
00:01:50,020 --> 00:01:55,100
Fetch will completely change how you make
network requests and handle responses.

31
00:01:55,100 --> 00:01:59,400
Some of the advantages of using the
Fetch API are that it's easy to use and

32
00:01:59,400 --> 00:02:00,750
understand.

33
00:02:00,750 --> 00:02:05,180
The API is completely promise-based,
meaning it uses JavaScript promises to

34
00:02:05,180 --> 00:02:07,600
handle the result you get
back from the server.

35
00:02:07,600 --> 00:02:11,690
This results in cleaner,
simpler code compared to XHR.

36
00:02:11,690 --> 00:02:14,050
And Fetch API is built into the browser,

37
00:02:14,050 --> 00:02:18,380
know having to load an external library
to simplify how you make async requests.

38
00:02:19,810 --> 00:02:23,900
We're going to create this simple
dog gallery app using the dog API.

39
00:02:23,900 --> 00:02:26,200
The app fetches a list of dog breeds and

40
00:02:26,200 --> 00:02:30,590
images from the API, it even uses fetch
to post data submitted by a forum.

41
00:02:32,790 --> 00:02:37,230
Before we start, I'm going to assume
that you know about JavaScript promises,

42
00:02:37,230 --> 00:02:39,090
since Fetch is promised space.

43
00:02:39,090 --> 00:02:43,740
And the basics of how web browsers send
HTTP requests and receive responses.

44
00:02:43,740 --> 00:02:46,500
So be sure to check the teacher's notes
for links to Treehouse courses and

45
00:02:46,500 --> 00:02:50,370
workshops that will get you
up to speed with both topics.

46
00:02:50,370 --> 00:02:53,980
By the end, you will have learned
a new way to make network requests and

47
00:02:53,980 --> 00:02:56,870
how Fetch makes requesting
resources easier.

48
00:02:56,870 --> 00:03:02,650
Now, as I'm recording this video, Internet
Explorer does not support the Fetch API.

49
00:03:02,650 --> 00:03:05,960
Fortunately, GitHub created
a handy fetch polyfill

50
00:03:05,960 --> 00:03:08,300
that lets you take
advantage of Fetch today.

51
00:03:08,300 --> 00:03:11,510
And you'll find the link to
the polyfill in the teacher's notes.

52
00:03:11,510 --> 00:03:13,080
All right, so coming up in the next video,

53
00:03:13,080 --> 00:03:15,270
we'll get started by writing
a basic Fetch request.