1
00:00:01,440 --> 00:00:03,270
We've already seen how to handle a promise

2
00:00:03,270 --> 00:00:05,706
getting fulfilled, and what to do when a

3
00:00:05,706 --> 00:00:07,915
promise gets rejected, but what if you

4
00:00:07,915 --> 00:00:10,181
need to execute some code after a promise

5
00:00:10,181 --> 00:00:11,815
settles, but you don't care if it was

6
00:00:11,815 --> 00:00:15,445
successful or not? Thankfully, there's a

7
00:00:15,445 --> 00:00:18,274
function just for that. As we've already

8
00:00:18,274 --> 00:00:19,864
seen, one common case for consuming

9
00:00:19,864 --> 00:00:23,770
promises is using a library like Axios to

10
00:00:23,770 --> 00:00:27,065
make HTTP requests, and often, when

11
00:00:27,065 --> 00:00:28,928
applications are making HTTP requests,

12
00:00:28,928 --> 00:00:32,057
they like to show a loading indicator, and

13
00:00:32,057 --> 00:00:34,263
then once the call is fulfilled, they

14
00:00:34,263 --> 00:00:36,231
would want to hide the loading indicator,

15
00:00:36,231 --> 00:00:38,853
but we also want to make sure in those

16
00:00:38,853 --> 00:00:40,882
situations that the indicator is hidden

17
00:00:40,882 --> 00:00:43,800
when the call is rejected. I think we've

18
00:00:43,800 --> 00:00:45,874
all ran across a website that doesn't hide

19
00:00:45,874 --> 00:00:47,682
the indicator when there's an error, and

20
00:00:47,682 --> 00:00:50,271
you're unable to do anything. So we need

21
00:00:50,271 --> 00:00:52,632
to make sure that the indicator goes away

22
00:00:52,632 --> 00:00:55,406
whenever the promise is settled. However,

23
00:00:55,406 --> 00:00:58,155
we don't want to do it the instant a

24
00:00:58,155 --> 00:01:00,315
promise is resolved. We want to make sure

25
00:01:00,315 --> 00:01:03,059
all the code in our then and catch blocks

26
00:01:03,059 --> 00:01:06,147
completes before we hide the indicator,

27
00:01:06,147 --> 00:01:07,915
particularly, if we have a long-running

28
00:01:07,915 --> 00:01:09,862
process in one of our then blocks. We

29
00:01:09,862 --> 00:01:12,332
don't want the indicator to disappear too

30
00:01:12,332 --> 00:01:15,509
quickly, so, how do we handle this? Return

31
00:01:15,509 --> 00:01:18,251
to the consuming.mjs file, and by now you

32
00:01:18,251 --> 00:01:20,365
know the routine, we have one empty

33
00:01:20,365 --> 00:01:22,255
function left, so we'll be placing our

34
00:01:22,255 --> 00:01:25,351
code in that block in this clip. Start by

35
00:01:25,351 --> 00:01:27,754
pasting the code from the chainCatch

36
00:01:27,754 --> 00:01:31,315
function into the function named final.

37
00:01:31,315 --> 00:01:32,809
Next, we want to show our loading

38
00:01:32,809 --> 00:01:34,791
indicator, and that's imported from our

39
00:01:34,791 --> 00:01:37,689
results file. So before you make the Axios

40
00:01:37,689 --> 00:01:42,666
request, call showWaiting. Let's hop over

41
00:01:42,666 --> 00:01:44,196
to the browser, and make sure that we know

42
00:01:44,196 --> 00:01:46,078
that the loading indicator is working

43
00:01:46,078 --> 00:01:49,523
before we continue. Refresh the app, and

44
00:01:49,523 --> 00:01:52,559
click the final button. When you do, a

45
00:01:52,559 --> 00:01:54,982
green box covers the screen, and it says,

46
00:01:54,982 --> 00:01:56,882
waiting. So our loading indicator shows

47
00:01:56,882 --> 00:02:00,613
up, but unfortunately it's not being

48
00:02:00,613 --> 00:02:03,249
hidden. Going back into the code, we have

49
00:02:03,249 --> 00:02:05,676
a couple choices. We could place our

50
00:02:05,676 --> 00:02:08,748
hideWaiting function in the then block, or

51
00:02:08,748 --> 00:02:11,596
the catch block, or both. We already said

52
00:02:11,596 --> 00:02:13,554
that we need to make sure both states stop

53
00:02:13,554 --> 00:02:15,748
showing the waiting indicator, and we

54
00:02:15,748 --> 00:02:18,136
started our course by talking about

55
00:02:18,136 --> 00:02:20,152
producing good code, so, it's probably

56
00:02:20,152 --> 00:02:23,085
best if we don't put it in each place

57
00:02:23,085 --> 00:02:25,416
repeating our code. Thankfully, promises

58
00:02:25,416 --> 00:02:28,650
have a function just for this case. After

59
00:02:28,650 --> 00:02:33,804
the catch block, add a new function named

60
00:02:33,804 --> 00:02:36,483
finally. Inside this function, let's use a

61
00:02:36,483 --> 00:02:41,989
timeout to call our hideWaiting. We

62
00:02:41,989 --> 00:02:43,171
normally wouldn't want to set a timeout

63
00:02:43,171 --> 00:02:45,402
for this, but for demonstration purposes,

64
00:02:45,402 --> 00:02:47,602
it'll let us see the waiting indicator for

65
00:02:47,602 --> 00:02:49,805
at least one and a half seconds before it

66
00:02:49,805 --> 00:02:52,502
disappears, and then we're going to update

67
00:02:52,502 --> 00:02:54,462
our result to let us know that we're

68
00:02:54,462 --> 00:02:58,818
completely done. Return one more time to

69
00:02:58,818 --> 00:03:01,899
the browser, and reload, and then click

70
00:03:01,899 --> 00:03:05,343
the Final Update button. You can see the

71
00:03:05,343 --> 00:03:07,428
waiting blocks show up; then after about

72
00:03:07,428 --> 00:03:09,858
one and a half seconds, the box goes away,

73
00:03:09,858 --> 00:03:12,669
and we see that our text has a

74
00:03:12,669 --> 00:03:15,960
--completely done added to it. That's

75
00:03:15,960 --> 00:03:18,209
because our finally block waited until all

76
00:03:18,209 --> 00:03:20,853
our code was done, and then ran. This

77
00:03:20,853 --> 00:03:23,534
allows you to run some asynchronous code,

78
00:03:23,534 --> 00:03:26,501
handle the success or failure case, and

79
00:03:26,501 --> 00:03:29,053
then run some final code. In our case,

80
00:03:29,053 --> 00:03:32,324
we're using that function to clean up our

81
00:03:32,324 --> 00:03:34,514
waiting indicator. Remember, there's three

82
00:03:34,514 --> 00:03:37,710
states to a promise. There's pending,

83
00:03:37,710 --> 00:03:41,130
fulfilled, and rejected; and in this

84
00:03:41,130 --> 00:03:43,453
module, you were able to see each of these

85
00:03:43,453 --> 00:03:45,679
three states, and more than that, you were

86
00:03:45,679 --> 00:03:47,187
able to see how to start chaining

87
00:03:47,187 --> 00:03:49,269
fulfilled and rejected states to handle

88
00:03:49,269 --> 00:03:53,362
the flow of data in your application; and

89
00:03:53,362 --> 00:03:54,614
that all works great if you're using a

90
00:03:54,614 --> 00:03:57,054
library like Axios that's already built on

91
00:03:57,054 --> 00:03:59,485
top of promises, but what if you want to

92
00:03:59,485 --> 00:04:01,949
work with an async function, like that

93
00:04:01,949 --> 00:04:03,756
setTimeout that we just used in our

94
00:04:03,756 --> 00:04:05,974
finally block? Is there a way that you can

95
00:04:05,974 --> 00:04:07,986
turn that function into a promise? There

96
00:04:07,986 --> 00:04:09,995
is. In the next module, I'll show you

97
00:04:09,995 --> 00:04:16,000
exactly what you need to do to create your own promises, starting with set timeout.

