1
00:00:00,109 --> 00:00:04,780
ES2015 introduced a more elegant and
friendlier data fetching interface

2
00:00:04,780 --> 00:00:07,904
that's native to the browser
called the fetch API.

3
00:00:07,904 --> 00:00:10,856
Fetch uses JavaScript
promises to let you handle

4
00:00:10,856 --> 00:00:13,233
the results returned from the server.

5
00:00:13,233 --> 00:00:17,416
In this video, I'll teach you a new
way to network requests with fetch.

6
00:00:17,416 --> 00:00:20,455
You'll learn how it makes
requesting resources easier.

7
00:00:20,455 --> 00:00:24,290
Now, I'm not gonna go to deep into the
fetch API in this course because we have

8
00:00:24,290 --> 00:00:27,653
content here at Treehouse dedicated
to working with the fetch API.

9
00:00:27,653 --> 00:00:32,134
So be sure to refer to the teacher's notes
to learn a whole lot more about fetch.

10
00:00:32,134 --> 00:00:35,848
I'm also going to continue
working in the file promises.js.

11
00:00:35,848 --> 00:00:39,754
If you'd like, you can create a new
file called fetch.js, for example,

12
00:00:39,754 --> 00:00:41,872
and write the new fetch requests there.

13
00:00:41,872 --> 00:00:45,203
No matter, what you can always
refer to the project files for

14
00:00:45,203 --> 00:00:47,370
any of the code written in this course.

15
00:00:47,370 --> 00:00:51,079
So to make a fetch request,
you use the global fetch method.

16
00:00:51,079 --> 00:00:56,816
Fetch takes one mandatory argument, the
path to the resource you want to fetch.

17
00:00:56,816 --> 00:01:01,205
In our eventListener,
I'll start by replacing the call to

18
00:01:01,205 --> 00:01:05,436
the getJSON function to fetch,
passing it the same URL.

19
00:01:05,436 --> 00:01:07,186
Now, here's the best part.

20
00:01:07,186 --> 00:01:11,831
We can actually get rid of the getJSON
function entirely because this

21
00:01:11,831 --> 00:01:16,250
single fetch method is going to
handle most of these tasks for us.

22
00:01:21,249 --> 00:01:26,259
The fetch method itself returns a promise,
and once fetch makes the request and

23
00:01:26,259 --> 00:01:30,165
the data finishes loading,
the fetch promise is fulfilled.

24
00:01:30,165 --> 00:01:34,233
It's also going to return a response
object containing information about

25
00:01:34,233 --> 00:01:38,248
the response like the status code and
the corresponding status message.

26
00:01:38,248 --> 00:01:42,786
In order to access and use the data,
we need to parse it to JSON first.

27
00:01:42,786 --> 00:01:46,293
So I'll chain a new then
method to fetch and

28
00:01:46,293 --> 00:01:51,165
pass it a function that accepts
the response via a parameter

29
00:01:51,165 --> 00:01:56,443
I'll name response and
parses it to JSON with response.json.

30
00:01:58,577 --> 00:02:02,152
Response.json is going
to read the response and

31
00:02:02,152 --> 00:02:05,213
returns a promise that resolves to JSON.

32
00:02:05,213 --> 00:02:09,390
And that's going to get passed
on to getProfiles once resolved.

33
00:02:09,390 --> 00:02:13,638
Next, the getProfiles
function is also making

34
00:02:13,638 --> 00:02:17,573
a request to the Wikipedia API
via getJSON.

35
00:02:17,573 --> 00:02:20,922
So let's change it to use fetch.

36
00:02:20,922 --> 00:02:25,880
And just like earlier we need
to pass the return data to JSON

37
00:02:25,880 --> 00:02:29,016
by chaining a then method to fetch and

38
00:02:29,016 --> 00:02:35,006
passing it a function that accepts
the response and parses it to JSON.

39
00:02:39,146 --> 00:02:40,730
And that's all there is to it.

40
00:02:40,730 --> 00:02:43,618
Promise.all is going to
work exactly as before,

41
00:02:43,618 --> 00:02:47,137
it's going to wait on all of
the individual fetch requests.

42
00:02:47,137 --> 00:02:52,206
Then join them into one return value when
all the fetch promises are fulfilled.

43
00:02:52,206 --> 00:02:53,605
Let's test our code.

44
00:02:53,605 --> 00:02:56,351
I'll refresh the page,
click the button, and

45
00:02:56,351 --> 00:02:58,902
everything works just like before, good.

46
00:03:02,611 --> 00:03:05,636
It's usually best to handle errors and
fetch requests or

47
00:03:05,636 --> 00:03:08,671
any promise sequence as high
up in the chain as possible.

48
00:03:08,671 --> 00:03:09,548
For example,

49
00:03:09,548 --> 00:03:14,377
you could handle an error in the Wikipedia
fetch separately by chaining a catch

50
00:03:14,377 --> 00:03:19,150
method to the fetch sequence that's
higher up in the getProfiles function.

51
00:03:19,150 --> 00:03:25,260
I'll pass catch a function that takes
the rejection reason as a parameter and

52
00:03:25,260 --> 00:03:27,143
logs it to the console.

53
00:03:27,143 --> 00:03:32,003
Just before the error, I'll display
the message Error Fetching Wicki.

54
00:03:35,903 --> 00:03:39,861
So now, if there's ever an issue
fetching the Wikipedia data,

55
00:03:39,861 --> 00:03:42,662
we'll know exactly where it's happening.

56
00:03:42,662 --> 00:03:45,794
And this is what I meant earlier when
I mentioned that promises provide

57
00:03:45,794 --> 00:03:47,930
an easier ways to catch
errors in your program.

58
00:03:50,698 --> 00:03:55,681
Finally, I want to display one other piece
of data to the user, the spacecraft each

59
00:03:55,681 --> 00:04:00,609
astronaut is on, which is almost always
the ISS or International Space Station.

60
00:04:00,609 --> 00:04:05,058
The data is available in
the first API call we make to open

61
00:04:05,058 --> 00:04:08,096
notify under a property named craft.

62
00:04:08,096 --> 00:04:13,486
So in the getProfiles function
method I'll pull that data out and

63
00:04:13,486 --> 00:04:19,955
save it in a variable named craft,
with const craft equals person.craft.

64
00:04:19,955 --> 00:04:24,466
Next I'll need to combine data returned
from two APIs into one object,

65
00:04:24,466 --> 00:04:27,631
the craft data with
the astronaut profiles data.

66
00:04:27,631 --> 00:04:33,159
So I'll chain one more then
method to this fetch sequence.

67
00:04:33,159 --> 00:04:37,898
I'll pass the method a function that
takes the profile data in JSON via

68
00:04:37,898 --> 00:04:41,524
parameter I'll call profile and
returns an object.

69
00:04:44,676 --> 00:04:49,085
Inside the object,
I'll use the spread operator to copy all

70
00:04:49,085 --> 00:04:53,413
the properties from a profile
object on to this new object.

71
00:04:53,413 --> 00:04:57,330
And in this object,
I'll include the craft property and

72
00:04:57,330 --> 00:04:59,622
value using the variable craft.

73
00:04:59,622 --> 00:05:02,728
Finally, in the generateHTML function,

74
00:05:02,728 --> 00:05:08,349
we'll display the craft data as a span
element just below the profile image.

75
00:05:11,622 --> 00:05:16,848
Then interpolate the value of
the craft property with ${},

76
00:05:16,848 --> 00:05:19,222
passing it person.craft.

77
00:05:21,202 --> 00:05:23,891
Now over in the browser, I'll refresh.

78
00:05:23,891 --> 00:05:25,298
Click View and good,

79
00:05:25,298 --> 00:05:30,232
we see each astronaut profile which
includes the spacecraft they're on.

80
00:05:36,808 --> 00:05:40,256
While promises seem like a clear
improvement over callbacks,

81
00:05:40,256 --> 00:05:43,651
mainly because they increase
the readability of async code,

82
00:05:43,651 --> 00:05:47,266
they still do not entirely get rid of
callback functions in your program.

83
00:05:47,266 --> 00:05:50,847
And that's okay because your code will
likely use callbacks in some way.

84
00:05:50,847 --> 00:05:53,484
It's the deep nesting that
could cause problems.

85
00:05:53,484 --> 00:05:57,722
In addition, your promise based program
may require lots of then methods,

86
00:05:57,722 --> 00:06:02,300
with anonymous functions or function
references to handle each different task.

87
00:06:02,300 --> 00:06:06,110
That can make your code somewhat confusing
and there's a chance that you still

88
00:06:06,110 --> 00:06:09,816
may end up writing code that resembles
the pyramid of doom style structure.

89
00:06:09,816 --> 00:06:13,617
So up next, you'll learn how the async
await syntax in JavaScript further

90
00:06:13,617 --> 00:06:17,599
simplifies the process of working with
promises, providing ways to make your

91
00:06:17,599 --> 00:06:21,310
asynchronous code look and behave
a little more like synchronous code.