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