1
00:00:05,960 --> 00:00:07,160
Welcome back.

2
00:00:07,190 --> 00:00:14,000
In this video, let's wrap up our concept on promises and then you're going to have a lot of coding

3
00:00:14,000 --> 00:00:14,960
challenges.

4
00:00:15,080 --> 00:00:22,720
So what you are going to do in this particular video is how we can consume multiple promises.

5
00:00:22,730 --> 00:00:25,880
Well, let's have some critical example here.

6
00:00:26,090 --> 00:00:32,870
Let's say that we have an application and for this application we want to fetch first is we want to

7
00:00:32,870 --> 00:00:36,620
fetch or or post.

8
00:00:37,590 --> 00:00:38,700
The step number one.

9
00:00:38,700 --> 00:00:47,940
And step number two is you want to fetch all comments or comments associated with a post.

10
00:00:47,970 --> 00:00:48,420
Good.

11
00:00:48,420 --> 00:00:52,590
So let's say that we have these three requests that we want to make.

12
00:00:52,920 --> 00:01:00,540
And what we want to do is that we want to get back all of the response before we display to the user.

13
00:01:01,050 --> 00:01:09,780
And it can happen that our first request to fetch or post it can take, let's say, 10 seconds to get

14
00:01:09,780 --> 00:01:10,410
pressed.

15
00:01:10,710 --> 00:01:15,630
And for that this fetch command can also take, let's say, 20 seconds.

16
00:01:16,710 --> 00:01:22,980
So we don't want situation whereby we fetch all posts and then after 20 seconds they will fetch our

17
00:01:22,980 --> 00:01:23,460
comment.

18
00:01:23,460 --> 00:01:28,230
We don't want that way, but instead we want to get them back at a goal.

19
00:01:28,260 --> 00:01:30,900
Then we display to the user.

20
00:01:31,770 --> 00:01:37,530
That is why we need what is called how we can consume promises at goal.

21
00:01:37,860 --> 00:01:43,140
And for this implementation we have to methods of consuming promises.

22
00:01:43,140 --> 00:01:47,580
So step number one is using what is called promise.

23
00:01:49,610 --> 00:01:58,880
Promise dot all and lastly is going to be promise dot race perfect.

24
00:01:58,880 --> 00:02:08,210
So let's start with promise dot all so promise that all is used to consume or resolve promise at a goal.

25
00:02:08,389 --> 00:02:14,570
So let's go ahead and create a dummy promise that fetch or post and then fetch our comments.

26
00:02:14,570 --> 00:02:17,250
So down here, here we go.

27
00:02:17,690 --> 00:02:19,370
Let's add a function.

28
00:02:19,370 --> 00:02:20,090
Simple one.

29
00:02:20,090 --> 00:02:22,430
Let's say post.

30
00:02:23,100 --> 00:02:23,940
Promise.

31
00:02:26,060 --> 00:02:36,110
And as usual is going to be new promise, new survey, new promise, and then pass in my function.

32
00:02:36,740 --> 00:02:39,320
Let me speed up here because you've talked about it before.

33
00:02:39,920 --> 00:02:46,260
So I have my resolve and my reject.

34
00:02:46,280 --> 00:02:52,310
So here, let's say let is post first.

35
00:02:54,010 --> 00:02:55,300
Equal to true.

36
00:02:55,840 --> 00:03:04,750
And then next is, let's say, let the actual post going to be, let's say, a real of post or object.

37
00:03:04,750 --> 00:03:07,990
Let's fetch a single post just in one.

38
00:03:07,990 --> 00:03:17,080
And then we have, let's say that title one of my post and then description here is going to be description.

39
00:03:19,020 --> 00:03:19,640
One.

40
00:03:19,650 --> 00:03:20,070
Perfect.

41
00:03:20,100 --> 00:03:23,220
Now we have our logic you want to implement.

42
00:03:23,220 --> 00:03:33,660
So for this one let's say that if is post first, then we can return the resolve function, not reject,

43
00:03:33,660 --> 00:03:36,990
but instead resolve and start.

44
00:03:36,990 --> 00:03:41,400
And then if something goes wrong here, going to be the reject.

45
00:03:41,400 --> 00:03:43,440
So here going to be rejected.

46
00:03:43,440 --> 00:03:47,310
You can use error statements or archiving for this one too.

47
00:03:47,340 --> 00:03:51,330
We can remove the basis here and it's going to be the same.

48
00:03:51,330 --> 00:03:56,190
So here we can even shorten it in this way is the same good.

49
00:03:56,280 --> 00:04:04,080
So it means that if the post is fetched then we want to return resolve, otherwise retain reject as

50
00:04:04,080 --> 00:04:04,440
that.

51
00:04:04,440 --> 00:04:06,540
So here our first promise.

52
00:04:06,540 --> 00:04:15,780
So here I can copy this one and let me give it a beautiful comment here as fetch post and then next

53
00:04:15,790 --> 00:04:16,200
prime.

54
00:04:16,230 --> 00:04:17,790
So let me last this one.

55
00:04:17,790 --> 00:04:19,050
Now come down here.

56
00:04:19,050 --> 00:04:20,700
I can copy this one again.

57
00:04:20,730 --> 00:04:27,780
Save it now I'm going to be fetch comments and here are going to be comments promised.

58
00:04:29,430 --> 00:04:29,660
Okay.

59
00:04:30,140 --> 00:04:32,890
Now we have two promises, so let's maintain these two.

60
00:04:32,900 --> 00:04:33,410
Okay.

61
00:04:33,440 --> 00:04:36,380
So you want to fetch these proteins.

62
00:04:36,380 --> 00:04:37,130
Ah, to go.

63
00:04:37,700 --> 00:04:40,400
So ah what we need to do is okay, sorry.

64
00:04:40,400 --> 00:04:43,430
Inside the comment is supposed to be let me say comment.

65
00:04:45,220 --> 00:04:46,000
And the comments.

66
00:04:46,000 --> 00:04:48,610
Let's see, the user for this comment is.

67
00:04:50,050 --> 00:04:53,350
Candy and then description is.

68
00:04:56,200 --> 00:04:57,100
Excellent.

69
00:04:57,770 --> 00:04:58,490
Post.

70
00:04:59,000 --> 00:04:59,660
Perfect.

71
00:04:59,870 --> 00:05:04,740
So let's change this one to comment fetched.

72
00:05:05,450 --> 00:05:05,990
Okay.

73
00:05:06,020 --> 00:05:06,800
There you go.

74
00:05:06,830 --> 00:05:07,960
So here we have.

75
00:05:07,970 --> 00:05:09,910
So let me send the resolve.

76
00:05:09,920 --> 00:05:16,910
I will send the comments I want to send and then for the post to let me send the post here and for the

77
00:05:16,910 --> 00:05:19,820
error to let's say that error.

78
00:05:20,150 --> 00:05:22,310
Fetching post.

79
00:05:23,000 --> 00:05:26,790
And inside the comment too.

80
00:05:26,810 --> 00:05:29,810
We can send the error and say that error.

81
00:05:30,900 --> 00:05:33,060
Fetching comments.

82
00:05:33,600 --> 00:05:34,880
Okay, now we have to comment.

83
00:05:34,890 --> 00:05:36,420
There's nothing new at this point.

84
00:05:36,420 --> 00:05:44,370
So how can we resolve or let's say that concern or resolve, resolve multiple.

85
00:05:46,510 --> 00:05:47,560
Promises.

86
00:05:47,890 --> 00:05:49,000
So here we go.

87
00:05:49,030 --> 00:05:50,980
We make this a promise.

88
00:05:51,580 --> 00:05:52,150
All right?

89
00:05:52,150 --> 00:05:53,020
Promise.

90
00:05:53,020 --> 00:05:57,640
And then dot all and as a function.

91
00:05:57,820 --> 00:06:03,700
So for this function, we pass in an array of the promises that we want to resolve.

92
00:06:03,730 --> 00:06:06,860
So here I'll pass in an array as that.

93
00:06:06,880 --> 00:06:10,390
So the promise I want to resolve our passing as that.

94
00:06:10,390 --> 00:06:13,510
So here I have promise one, which is this one.

95
00:06:13,510 --> 00:06:14,590
So here you go.

96
00:06:14,620 --> 00:06:17,470
You're going to be post promise.

97
00:06:17,470 --> 00:06:19,420
And I also want to reserve comment.

98
00:06:19,420 --> 00:06:19,900
Promise.

99
00:06:19,900 --> 00:06:22,690
So comma separated, common promise.

100
00:06:22,720 --> 00:06:24,340
Now I have passed in that.

101
00:06:24,370 --> 00:06:25,880
How am I going to resolve it?

102
00:06:25,900 --> 00:06:33,070
As always, use dot then and remember though then you pass in a callback function.

103
00:06:33,070 --> 00:06:35,710
And here we have all the promises.

104
00:06:35,710 --> 00:06:38,380
Let me see all promises here.

105
00:06:38,680 --> 00:06:44,770
So now I can cancel that log the or promises as that.

106
00:06:44,770 --> 00:06:46,960
So when I save it now check it out.

107
00:06:46,960 --> 00:06:49,090
Indeed I have what I see.

108
00:06:49,120 --> 00:06:50,260
Error fetching user.

109
00:06:51,860 --> 00:06:52,910
I think.

110
00:06:53,960 --> 00:06:54,410
Yeah.

111
00:06:54,410 --> 00:06:55,820
This function, this one is being called.

112
00:06:55,820 --> 00:06:56,540
So let me comment.

113
00:06:56,540 --> 00:06:57,230
This one.

114
00:06:57,980 --> 00:06:59,210
Yes, this one.

115
00:07:00,170 --> 00:07:00,800
Yes.

116
00:07:00,800 --> 00:07:01,550
Comment out.

117
00:07:01,550 --> 00:07:02,180
Now let's see.

118
00:07:02,180 --> 00:07:04,610
Yes, we have our promise being fulfilled.

119
00:07:04,610 --> 00:07:04,940
See that?

120
00:07:04,940 --> 00:07:10,970
We have the first one that is our title of the post here.

121
00:07:10,970 --> 00:07:13,070
That is title one and description.

122
00:07:13,070 --> 00:07:15,710
And the user can see that we have them at go.

123
00:07:15,950 --> 00:07:22,700
But one good thing is that promise that all return there is the result or the value and put them in

124
00:07:22,700 --> 00:07:23,360
an array.

125
00:07:23,390 --> 00:07:28,940
We see that they are in array of the first one and the second one.

126
00:07:28,940 --> 00:07:35,930
So if we want to get the first value, that is the post promise, you know how you use a real square

127
00:07:36,110 --> 00:07:41,120
basis and then the first index zero meaning fetching the post promise.

128
00:07:41,120 --> 00:07:49,580
If I do that, I only have the post if I want to get if I want to get the comment too, it's going to

129
00:07:49,580 --> 00:07:51,500
be index one.

130
00:07:51,500 --> 00:07:58,490
And now I have separately my object that is my post and an object that represents my user.

131
00:07:58,640 --> 00:08:01,010
Okay, that is promised at all.

132
00:08:01,010 --> 00:08:02,870
So what about if something goes wrong?

133
00:08:02,870 --> 00:08:07,400
Now let's take note about promise or for promise at all.

134
00:08:07,430 --> 00:08:17,120
If any of your promises fail or the other one will be regarded as failed again, if one promise failed,

135
00:08:17,210 --> 00:08:19,760
all the other ones will be failed.

136
00:08:19,760 --> 00:08:25,280
Either one failed and all of them resolve it will respond as failed.

137
00:08:25,280 --> 00:08:34,820
So here let's try to catch an error here using third catch as before, and let's see if one of our promises

138
00:08:34,820 --> 00:08:35,510
failed.

139
00:08:35,510 --> 00:08:37,610
So just console.log the.

140
00:08:38,960 --> 00:08:40,850
Error in error here.

141
00:08:42,380 --> 00:08:42,970
Error here.

142
00:08:42,980 --> 00:08:47,390
So now at this point, there will be no error because everything is perfect.

143
00:08:47,390 --> 00:08:54,470
So inside my the word courage, the post promised let's change this one to false meaning.

144
00:08:54,650 --> 00:08:56,990
This reject is going to be called.

145
00:08:56,990 --> 00:08:59,150
So if I save it now check it out.

146
00:08:59,180 --> 00:09:06,230
You can see that we see error even though the first one is for field, but because we are wasting promises

147
00:09:06,230 --> 00:09:14,180
or one of them field, therefore it regards this one also as field that is promised at all.

148
00:09:14,420 --> 00:09:20,690
And lastly, we have what is called promise dot race, of which I made mention here.

149
00:09:20,690 --> 00:09:27,120
So what is promised dot race as a name even implies we are waiting for reason, right?

150
00:09:27,140 --> 00:09:28,250
Like a competition.

151
00:09:28,250 --> 00:09:35,300
It means that for this one, the first function, the first promise that gets executed first will be

152
00:09:35,300 --> 00:09:35,960
retained.

153
00:09:36,350 --> 00:09:42,260
So let's say that the first promise it took one second to resolve and a second one took 5 seconds to

154
00:09:42,260 --> 00:09:46,610
resolve because the first one came at first, the first one be resolved.

155
00:09:46,760 --> 00:09:50,090
So for this one, because they are going to resolve at the same time.

156
00:09:50,090 --> 00:09:51,610
So here let's use promised at all.

157
00:09:51,620 --> 00:10:01,910
So here we're going to be as promised, promise the on and then come down here.

158
00:10:02,120 --> 00:10:08,840
Let's make use of promise dot race meaning they are going for racing and let's see how you're going

159
00:10:08,840 --> 00:10:20,780
to make promise, promise, uppercase and then dot race has that the same thing as my array of promises?

160
00:10:20,780 --> 00:10:30,110
Post promise and then comment promise and then dot then as before the callback function, the actual

161
00:10:30,290 --> 00:10:33,500
let me say promise or data or value.

162
00:10:33,500 --> 00:10:34,820
It can be anything.

163
00:10:34,820 --> 00:10:39,530
And here we go console.log the data or response.

164
00:10:39,680 --> 00:10:52,160
And if something goes wrong, do not catch and also the error and console log the the error.

165
00:10:54,810 --> 00:11:00,410
The error is done so check it out to see that fetch fetches error fetching post.

166
00:11:00,420 --> 00:11:03,840
Yeah because for the first one there is error here.

167
00:11:03,840 --> 00:11:05,220
So let's change this one to true.

168
00:11:06,390 --> 00:11:06,940
Check it out.

169
00:11:06,960 --> 00:11:13,950
Now you can see that we have the first one being resolved because ideally is running from top to bottom

170
00:11:13,950 --> 00:11:17,100
and because all this function is going to run at the same time.

171
00:11:17,100 --> 00:11:18,470
But this one run first.

172
00:11:18,480 --> 00:11:19,890
That's why we see this one.

173
00:11:20,160 --> 00:11:22,500
We see that we have type one and description.

174
00:11:22,920 --> 00:11:23,880
Well, that is it.

175
00:11:23,880 --> 00:11:26,130
About promised at all and promised.

176
00:11:26,130 --> 00:11:27,720
That raised the next video.

177
00:11:27,750 --> 00:11:31,650
Let's start with the last concept called async await.

178
00:11:31,890 --> 00:11:35,580
That is the name you are going to hear a lot everywhere you meet async.

179
00:11:35,790 --> 00:11:38,130
So let's get into that in this video.