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.