1
00:00:01,335 --> 00:00:02,918
Have you ever needed several functions to

2
00:00:02,918 --> 00:00:05,558
run independent of each other, but you

3
00:00:05,558 --> 00:00:07,370
couldn't continue until they were all

4
00:00:07,370 --> 00:00:10,644
complete? If so, that's a use case that

5
00:00:10,644 --> 00:00:13,908
promises excel at. One of the first

6
00:00:13,908 --> 00:00:15,947
large-scale applications I wrote using

7
00:00:15,947 --> 00:00:19,054
JavaScript required a lot of metadata.

8
00:00:19,054 --> 00:00:20,961
There were users, and customers, and jobs,

9
00:00:20,961 --> 00:00:23,034
and accounts; and each of those had their

10
00:00:23,034 --> 00:00:26,101
own statuses and types, and other pieces

11
00:00:26,101 --> 00:00:28,344
of metadata. We might've needed 10 pieces

12
00:00:28,344 --> 00:00:31,453
of metadata to perform one single action,

13
00:00:31,453 --> 00:00:33,881
but I didn't need to load the user

14
00:00:33,881 --> 00:00:36,421
metadata and then load account metadata,

15
00:00:36,421 --> 00:00:39,264
because the data wasn't really related, I

16
00:00:39,264 --> 00:00:40,914
just needed to make sure that all of the

17
00:00:40,914 --> 00:00:44,469
metadata I did need was loaded before I

18
00:00:44,469 --> 00:00:46,655
continued. In fact, not only did I not

19
00:00:46,655 --> 00:00:48,803
need to have sequential API calls, I

20
00:00:48,803 --> 00:00:51,801
didn't even want them, that would've been

21
00:00:51,801 --> 00:00:54,944
too slow. I wanted to batch up all of my

22
00:00:54,944 --> 00:00:57,652
calls, fire them off all at once, and then

23
00:00:57,652 --> 00:01:01,146
move on once they all came back. This is

24
00:01:01,146 --> 00:01:03,725
part of the power of asynchronous

25
00:01:03,725 --> 00:01:05,216
programming. You don't have to wait for

26
00:01:05,216 --> 00:01:08,200
one call to finish before you can start

27
00:01:08,200 --> 00:01:10,345
another, and with promises, you can still

28
00:01:10,345 --> 00:01:13,123
tell the code to not continue until all of

29
00:01:13,123 --> 00:01:15,658
the data comes back. Our code in this clip

30
00:01:15,658 --> 00:01:17,970
is going to load all of the metadata from

31
00:01:17,970 --> 00:01:20,503
the API, specifically, that's item

32
00:01:20,503 --> 00:01:23,885
categories, order statuses, and user

33
00:01:23,885 --> 00:01:26,679
types. Return to the IDE, and the creating

34
00:01:26,679 --> 00:01:29,761
file once again. Navigate down to the

35
00:01:29,761 --> 00:01:32,657
allPromises function, as this is where

36
00:01:32,657 --> 00:01:35,573
we'll be spending our time in this clip.

37
00:01:35,573 --> 00:01:38,065
Since we're loading data from an API,

38
00:01:38,065 --> 00:01:43,264
let's use Axios again. Now remember, Axios

39
00:01:43,264 --> 00:01:46,289
is built using promises, so each of our

40
00:01:46,289 --> 00:01:48,938
variables here is a promise. The question

41
00:01:48,938 --> 00:01:51,972
is, how can we wait until all three of

42
00:01:51,972 --> 00:01:53,748
these promises are fulfilled, particularly

43
00:01:53,748 --> 00:01:56,698
when we don't know the order that the API

44
00:01:56,698 --> 00:01:59,053
will return them in, and in reality, that

45
00:01:59,053 --> 00:02:01,330
order might change from call to call,

46
00:02:01,330 --> 00:02:04,431
depending on the API's load, and other

47
00:02:04,431 --> 00:02:06,493
considerations. Since we want all of the

48
00:02:06,493 --> 00:02:08,755
promises to be fulfilled, we should use

49
00:02:08,755 --> 00:02:12,106
the all function on a promise. To do this,

50
00:02:12,106 --> 00:02:14,829
we do not need to create a new promise

51
00:02:14,829 --> 00:02:18,007
object, instead we call Promise.all, and

52
00:02:18,007 --> 00:02:22,447
then we pass in the three variables that

53
00:02:22,447 --> 00:02:25,481
we just created. This will queue up all

54
00:02:25,481 --> 00:02:29,193
three promises, and wait until all three

55
00:02:29,193 --> 00:02:32,561
return. We can attach a .then function to

56
00:02:32,561 --> 00:02:34,746
this all function, so that we can handle

57
00:02:34,746 --> 00:02:37,676
it in the same way as before, but what

58
00:02:37,676 --> 00:02:40,457
will be the result value in the then

59
00:02:40,457 --> 00:02:43,561
function, do you have any ideas? It's

60
00:02:43,561 --> 00:02:46,428
going to be an array of results, and the

61
00:02:46,428 --> 00:02:48,872
order will match the order that we added

62
00:02:48,872 --> 00:02:50,884
them, not the order that they were

63
00:02:50,884 --> 00:02:53,041
resolved, and that's good news because it

64
00:02:53,041 --> 00:02:56,910
means categories will always be the first

65
00:02:56,910 --> 00:02:58,856
result. Remember that these are Axios

66
00:02:58,856 --> 00:03:01,620
objects coming back. Therefore, we need to

67
00:03:01,620 --> 00:03:04,409
access the data property on them to see

68
00:03:04,409 --> 00:03:07,709
our data. Hopping over to the web, if we

69
00:03:07,709 --> 00:03:11,646
reload our page and click on the All

70
00:03:11,646 --> 00:03:13,632
button, after about one and a half

71
00:03:13,632 --> 00:03:17,852
seconds, we see a list of data dumped out.

72
00:03:17,852 --> 00:03:19,383
As we scroll, we can see that that

73
00:03:19,383 --> 00:03:22,345
includes item categories like kayak, and

74
00:03:22,345 --> 00:03:25,018
order statuses like shipped, and user

75
00:03:25,018 --> 00:03:28,224
types like individual; and if you look at

76
00:03:28,224 --> 00:03:30,094
the console, you can see that all three

77
00:03:30,094 --> 00:03:32,579
calls were made to the API, and even

78
00:03:32,579 --> 00:03:34,504
though the first two responded nearly

79
00:03:34,504 --> 00:03:37,780
instantly, the call waited until the order

80
00:03:37,780 --> 00:03:40,662
status call completed. Remember, this call

81
00:03:40,662 --> 00:03:43,812
has a one and a half second delay in the

82
00:03:43,812 --> 00:03:46,973
API. What happens though if one of our

83
00:03:46,973 --> 00:03:49,011
calls fails? Will it sit there waiting

84
00:03:49,011 --> 00:03:51,063
endlessly for it be fulfilled? Well, let's

85
00:03:51,063 --> 00:03:54,133
tweak our code and find out. Start by

86
00:03:54,133 --> 00:04:00,031
adding a fourth Axios call, then add it to

87
00:04:00,031 --> 00:04:06,547
the promise array, and of course, add it

88
00:04:06,547 --> 00:04:12,130
to the then as well. With that, hop back

89
00:04:12,130 --> 00:04:16,306
to the browser, refresh, and rerun the all

90
00:04:16,306 --> 00:04:18,598
command again. This time, nothing is

91
00:04:18,598 --> 00:04:22,802
updated, and we have an error in our

92
00:04:22,802 --> 00:04:24,434
console. Do you remember what we have to

93
00:04:24,434 --> 00:04:27,511
do when we have an Uncaught (in promise)

94
00:04:27,511 --> 00:04:29,280
error? That's right, we've got to catch

95
00:04:29,280 --> 00:04:35,276
it. So, add a catch statement after the

96
00:04:35,276 --> 00:04:38,444
then. Save this, and head back to the

97
00:04:38,444 --> 00:04:40,003
browser. Reload, and rerun that all

98
00:04:40,003 --> 00:04:42,917
function one more time. Notice what

99
00:04:42,917 --> 00:04:45,611
happens; not only does the box update

100
00:04:45,611 --> 00:04:48,521
nearly instantly with a 404 error, but if

101
00:04:48,521 --> 00:04:51,029
you noticed in the console window, it

102
00:04:51,029 --> 00:04:53,773
updated before the order status call even

103
00:04:53,773 --> 00:04:57,034
completed. Let's rerun that, and pay

104
00:04:57,034 --> 00:05:00,500
attention to the console. The all function

105
00:05:00,500 --> 00:05:04,116
will wait until either all promises are

106
00:05:04,116 --> 00:05:09,353
fulfilled, or until the first promise is

107
00:05:09,353 --> 00:05:11,738
rejected. This can be useful in a

108
00:05:11,738 --> 00:05:13,438
situation where you don't want to continue

109
00:05:13,438 --> 00:05:16,461
if any of your promises are rejected. For

110
00:05:16,461 --> 00:05:18,424
example, if the address types data had

111
00:05:18,424 --> 00:05:20,105
been something so essential that we

112
00:05:20,105 --> 00:05:22,552
couldn't possibly continue without it, we

113
00:05:22,552 --> 00:05:24,178
wouldn't want to wait for other promises

114
00:05:24,178 --> 00:05:27,694
to complete before continuing on. But what

115
00:05:27,694 --> 00:05:30,063
if that's not the situation? What if the

116
00:05:30,063 --> 00:05:31,951
data is so independent that you don't

117
00:05:31,951 --> 00:05:33,884
really care if one or two calls failed,

118
00:05:33,884 --> 00:05:36,468
and you still want to wait until they're

119
00:05:36,468 --> 00:05:38,642
all settled? I'll show you the two things

120
00:05:38,642 --> 00:05:42,000
you need to change to make that happen, next.

