1
00:00:00,243 --> 00:00:02,852
Currently our async await function and

2
00:00:02,852 --> 00:00:07,366
promise sequence do not handle
exceptions and rejected promises.

3
00:00:07,366 --> 00:00:11,464
You learn that when working with promises
it's best to call catch on a rejected

4
00:00:11,464 --> 00:00:14,523
promise, if you don't
the promise might silently fail.

5
00:00:14,523 --> 00:00:18,204
Behind the async await syntax
we're working with promises so

6
00:00:18,204 --> 00:00:22,460
it is possible to call catch even then or
finally on an awaited promise.

7
00:00:22,460 --> 00:00:25,885
For example,
in the getPeopleInSpace function I'll

8
00:00:25,885 --> 00:00:30,202
chain a catch method to the first
fetch method that logs the message,

9
00:00:30,202 --> 00:00:33,790
error fetching data,
along with the rejection reason.

10
00:00:37,089 --> 00:00:42,227
This will catch a rejected promise
returned by this fetch call, for example.

11
00:00:47,721 --> 00:00:51,681
And I could do the same with
the next fetch method, but

12
00:00:51,681 --> 00:00:57,403
now we're seeing our function starting
to get a bit messy and harder to read.

13
00:00:57,403 --> 00:00:59,845
So I'll delete these two catch methods.

14
00:00:59,845 --> 00:01:04,312
And instead I'm going to catch all
exceptions in one place by writing

15
00:01:04,312 --> 00:01:09,099
a separate async function that handles
the fetching and parsing of data.

16
00:01:09,099 --> 00:01:13,573
And since we're working with what looks
like regular synchronous code the function

17
00:01:13,573 --> 00:01:16,355
will use a try catch statement
to handle any errors.

18
00:01:16,355 --> 00:01:20,743
Try catch is the most common way to
handle exceptions when using async await.

19
00:01:22,405 --> 00:01:29,985
I'll name the function getJSON and it will
take the URL to fetch as its argument.

20
00:01:29,985 --> 00:01:33,650
This is an asynchronous function so
I'll tag it with async.

21
00:01:33,650 --> 00:01:38,887
Try catch consists of two main blocks,
try and catch.

22
00:01:38,887 --> 00:01:42,740
Try will contain all the code
that needs to be executed and

23
00:01:42,740 --> 00:01:48,212
any code inside catch will be executed if
an exception is thrown in the try block.

24
00:01:48,212 --> 00:01:52,901
When an error occurs catch gets
an error object containing the details

25
00:01:52,901 --> 00:01:54,101
about the error.

26
00:01:54,101 --> 00:01:58,004
So let's have error
represent the error object.

27
00:01:58,004 --> 00:02:02,819
Next, inside the try block I'll add
the data fetching statements like earlier.

28
00:02:02,819 --> 00:02:08,130
Initialize a variable
named response whose value

29
00:02:08,130 --> 00:02:13,190
awaits the promise returned
by fetch passing it

30
00:02:13,190 --> 00:02:18,137
url then I'll return await response.json.

31
00:02:18,137 --> 00:02:23,078
Returning await response.json
means that the function is

32
00:02:23,078 --> 00:02:27,732
going to wait for
response.json to resolve or reject.

33
00:02:27,732 --> 00:02:31,879
If it rejects it's going to throw
before returning anything and

34
00:02:31,879 --> 00:02:35,351
any errors thrown will be
caught by the catch clause.

35
00:02:35,351 --> 00:02:39,731
Next, if an error occurs when fetching
data from any of our endpoints or

36
00:02:39,731 --> 00:02:43,464
when parsing the data we'll
handle the error inside catch.

37
00:02:43,464 --> 00:02:48,538
In the catch block I'll use a throw
statement to rethrow an exception after

38
00:02:48,538 --> 00:02:53,531
it's caught by catch using the throw
keyword followed by the exception or

39
00:02:53,531 --> 00:02:54,587
error object.

40
00:02:54,587 --> 00:02:59,251
The benefit of doing this is that any
errors caught here will bubble up and

41
00:02:59,251 --> 00:03:03,310
be caught by try catch blocks or
catch methods at the top level.

42
00:03:03,310 --> 00:03:08,185
For example, a catch method in the click
event listener, which we'll add shortly.

43
00:03:08,185 --> 00:03:13,071
Next, in the getPeopleInSpace function
we're no longer going to call fetch.

44
00:03:13,071 --> 00:03:16,641
Instead we'll call
the get JSON function so

45
00:03:16,641 --> 00:03:20,403
we can delete the variable
people response and

46
00:03:20,403 --> 00:03:26,405
set the value of peopleJSON to a await
getJSON passing at the url to fetch.

47
00:03:26,405 --> 00:03:30,530
Remember, getJSON is an async
function that returns a promise so

48
00:03:30,530 --> 00:03:34,280
we still need to await that
promise with the await keyword.

49
00:03:34,280 --> 00:03:39,038
In the map callback I'll
also delete the fetch

50
00:03:39,038 --> 00:03:43,309
statement stored in profileResponse and

51
00:03:43,309 --> 00:03:50,642
set profileJSON to await getJSON
passing it wikiUrl + person.name.

52
00:03:50,642 --> 00:03:52,173
All right, let's test our code.

53
00:03:54,069 --> 00:03:56,044
So far,
everything works as expected, good.

54
00:04:01,627 --> 00:04:05,897
Finally, to handle any other errors
which may occur in our async code and

55
00:04:05,897 --> 00:04:10,797
display a user friendly message I'll once
again chain a catch method on the promise

56
00:04:10,797 --> 00:04:14,513
returned by getPeopleInSpace
just above the finally method.

57
00:04:18,003 --> 00:04:23,919
Here I'll set the inner HTML of
the page's peopleList container div.

58
00:04:26,257 --> 00:04:32,268
To an h3 that displays the text,
something went wrong and

59
00:04:32,268 --> 00:04:36,568
log the rejection reason to the console.

60
00:04:36,568 --> 00:04:38,883
This time I'll use console.error so

61
00:04:38,883 --> 00:04:43,165
that the information is formatted
as an error message in the console.

62
00:04:44,780 --> 00:04:50,176
Again, this also means that any
exceptions caught up here in the getJSON

63
00:04:50,176 --> 00:04:55,932
function's try catch will bubble up and
be caught here in this catch method.

64
00:04:55,932 --> 00:04:59,109
So now any time getPeopleInSpace
rejects a promise,

65
00:04:59,109 --> 00:05:02,780
if there's an issue with one
of the endpoints, for example,

66
00:05:02,780 --> 00:05:06,750
users will see the message,
Something went wrong in the browser.

67
00:05:06,750 --> 00:05:11,587
And in the console we also get
the rejection reason TypeError: Failed to

68
00:05:11,587 --> 00:05:13,418
fetch as an error message.

69
00:05:14,922 --> 00:05:18,648
All right, our project app
is now complete, nice work.

70
00:05:18,648 --> 00:05:23,319
To learn how to write the code inside
the event listener using try catch and

71
00:05:23,319 --> 00:05:28,379
async await check out the code snippet
in the Teacher's Notes with this video.

72
00:05:28,379 --> 00:05:32,068
Hopefully, this course helped demystify
some of the concepts of asynchronous

73
00:05:32,068 --> 00:05:33,500
programming in JavaScript and

74
00:05:33,500 --> 00:05:37,700
gave you a better understanding of working
with callbacks, promises, and async await.

75
00:05:37,700 --> 00:05:41,317
So that you can confidently and
appropriately apply them in your projects.

76
00:05:41,317 --> 00:05:45,872
I encourage you to experiment with each of
the methods you learn, especially the more

77
00:05:45,872 --> 00:05:49,494
modern and elegant tools like promises,
fetch, and async await.

78
00:05:49,494 --> 00:05:51,698
To get started practicing
what you learned,

79
00:05:51,698 --> 00:05:55,534
why don't you try converting callback
based code to promises or async await.

80
00:05:55,534 --> 00:05:59,244
Or maybe you have a project that
uses XHR to make AJAX requests,

81
00:05:59,244 --> 00:06:01,488
try implementing fetch API instead.

82
00:06:01,488 --> 00:06:04,224
If you have questions about
anything covered in this course,

83
00:06:04,224 --> 00:06:07,815
feel free to reach out to the Treehouse
staff or other students in the community.

84
00:06:07,815 --> 00:06:08,440
Thanks everyone and happy coding.