1 00:00:00,421 --> 00:00:04,979 So now I want to teach you a third method that's a newer addition to Promises. 2 00:00:04,979 --> 00:00:06,511 It's called finally. 3 00:00:06,511 --> 00:00:09,752 And it gets called once a promise is fully settled. 4 00:00:09,752 --> 00:00:13,855 Meaning, regardless of whether the promise is fulfilled or rejected, 5 00:00:13,855 --> 00:00:16,759 the callback function passed to it gets executed. 6 00:00:16,759 --> 00:00:22,475 Because of this, it's usually best to use finally as the last chain method. 7 00:00:22,475 --> 00:00:23,773 And finally is useful if and 8 00:00:23,773 --> 00:00:27,108 when you need to do some clean up after the promise sequence finished. 9 00:00:27,108 --> 00:00:32,200 For example, when the button is clicked, I want to change the button's text to 10 00:00:32,200 --> 00:00:37,143 loading, then remove the button from the page once all the data is returned. 11 00:00:37,143 --> 00:00:42,538 So first in the EventListener I'll set the text content 12 00:00:42,538 --> 00:00:49,328 of the button on click with event.target.textContent = Loading. 13 00:00:52,644 --> 00:00:57,696 Then chain the finally method to the end of the Promise sequence. 14 00:00:59,919 --> 00:01:03,959 Finally takes a function that's called when the promise is settled. 15 00:01:03,959 --> 00:01:09,044 So next I'll pass the code that removes the button from the page, 16 00:01:09,044 --> 00:01:14,874 event.target.remove into the finally method using an arrow function. 17 00:01:16,388 --> 00:01:21,885 In the browser, click the button and see the text change to Loading. 18 00:01:21,885 --> 00:01:23,708 Then it's removed from the page when the data loads. 19 00:01:23,708 --> 00:01:28,631 The finally method removes the button from the page after the data is fetched and 20 00:01:28,631 --> 00:01:32,980 processed, regardless of whether or not that operation succeeded. 21 00:01:32,980 --> 00:01:36,616 Because of that, if an error occurs, for example, 22 00:01:36,616 --> 00:01:40,180 users may see a blank section of content like this. 23 00:01:40,180 --> 00:01:44,856 So we can use catch to display a user-friendly message to let them 24 00:01:44,856 --> 00:01:46,906 know something went wrong. 25 00:01:46,906 --> 00:01:52,182 For instance, in the catch method, I'll open up a set of curly braces, 26 00:01:52,182 --> 00:01:56,629 since we're going to pass it multiple lines of code. 27 00:01:56,629 --> 00:02:02,769 Then I'll set the innerHTML of the main peopleList div, 28 00:02:04,494 --> 00:02:09,416 To display an h3 with the text, something went wrong. 29 00:02:12,348 --> 00:02:18,186 So now this message is going to appear on the page in the event of an error, 30 00:02:18,186 --> 00:02:22,223 like a connectivity issue or a rejected promise. 31 00:02:22,223 --> 00:02:27,180 So as you've learned so far, promises offer a more intuitive flow. 32 00:02:27,180 --> 00:02:32,439 Whereas callback nesting requires you to jump around to comprehend the code's flow, 33 00:02:32,439 --> 00:02:36,473 promises let you chain then methods to achieve sequential tasks, 34 00:02:36,473 --> 00:02:39,298 providing a more linear reading experience. 35 00:02:39,298 --> 00:02:43,381 Be sure to review the teacher's notes with this video to see more examples of how to 36 00:02:43,381 --> 00:02:46,059 run multiple promises in parallel with promise.all