Original subtitles

1 1

Let's now quickly talk about 2

2

the three other Promise combinators, 3

3

which are race, allSettled and any. 4

4

And the first one we're gonna talk about is Promise.race. 5

5

So like this . 6

6

And Promise.race, just like all other combinators, 7

7

receives an array of promises and it also returns a promise. 8

8

Now this promise returned by Promise.race 9

9

is settled as soon as one of the input promises settles. 10

10

And remember that settled simply means 11

11

that a value is available, 12

12

but it doesn't matter 13

13

if the promise got rejected or fulfilled. 14

14

And so in Promis.race, 15

15

basically the first settled promise wins the race. 16

16

But let's now actually see this in action. 17

17

And I will create a quick IIFE here 18

18

so that I can use async await 19

19

without like creating a whole new function with a name. 20

20

And so as always then we use await Promise 21

21

and in this case .race, 22

22

and let's also now store it here as a response. 23

23

And now here let's define an array of promises 24

24

and lets just get this JSON here, 25

25

let's getJSON function and try it with three countries. 26

26

Let's say Italy, 27

27

and do this three times. 28

28

Let's say Egypt and then also Mexico. 29

29

And so now these three promises will basically 30

30

race against each other, like in a real race. 31

31

Now, if the winning promise is then a fulfilled promise, 32

32

then the fulfillment value of this whole race promise 33

33

is gonna be the fulfillment value of the winning promise. 34

34

So that's more obvious than it maybe sound. 35

35

So let's just see the result here in the console. 36

36

And so we got Italy, but if we try it again, 37

37

then maybe we get another result 38

38

because then maybe another call is gonna be faster. 39

39

But well, it seems to be always Italy but now it's Mexico 40

40

and let's actually see this in the network tab. 41

41

So making it smaller again. 42

42

And so you see that indeed Mexico 43

43

is the one who took the least time. 44

44

So test the smallest bar here. 45

45

And it also was the fastest of the three, right? 46

46

This time, the fastest was Egypt here by far. 47

47

And so that's what we should see in the console. 48

48

Okay, so again, just keep in mind 49

49

that here in Promised.race, 50

50

we only get one result 51

51

and not an array of the results of all the three. 52

52

Now a promise that gets rejected 53

53

can actually also win the race. 54

54

And so we say that Promise.race short circuits 55

55

whenever one of the promises gets settled. 56

56

And so again, that means no matter if fulfilled or rejected. 57

57

So let's try some weird name here. 58

58

And so now it is the rejected promise that won basically. 59

59

But let's go back here to as it was, 60

60

and see another example because in the real world 61

61

Promise.race is actually very useful 62

62

to prevent against never ending promises 63

63

or also very long running promises. 64

64

For example, if your user 65

65

has a very bad internet connection, 66

66

then a fetch requests in your application 67

67

might take way too long to actually be useful. 68

68

And so we can create a special time out promise, 69

69

which automatically rejects after a certain time has passed. 70

70

So let's do that. 71

71

And it's gonna be similar to the wait function 72

72

that we created earlier. 73

73

But the difference is that this one is actually going 74

74

to reject and not going to resolve. 75

75

So this time let's actually pass in milliseconds, right? 76

76

Well, let's just pass in seconds 77

77

just to make it consistent with the other one. 78

78

So return new Promise 79

79

and execute a function. 80

80

And again, in this case, we will not resolve but reject. 81

81

And so here for the resolve function, 82

82

which is always the first one we can once again, 83

83

use this throw away variable. 84

84

So using this convention 85

85

and then here reject and setTimeout 86

86

and here we specify a callback function. 87

87

And so we say that after a certain amount of seconds, 88

88

let's call it sec like this actually. 89

89

So after this time has passed, we reject the promise. 90

90

So we create a new error 91

91

saying, "Requests took too long." 92

92

And so now we can simply have the Ajax call 93

93

that we were talking about earlier, 94

94

raced against this timeout. 95

95

All right, so let me show you what that means. 96

96

So Promise.race, 97

97

and then here, the first promise, 98

98

let's use again or getJSON. 99

99

So this is basically what we are interested in here 100

100

and let's use another country Tanzania again. 101

101

And the second promise is then going to be or timeout. 102

102

So let's say that we only want to wait like one second. 103

103

And so we will have these two then race against each other. 104

104

And if the timeout happens first, 105

105

then all of this here will be rejected, right? 106

106

And so basically that will then abort the fetch 107

107

that is happening here in getJSON. 108

108

So I could have used again async await, 109

109

but why not use the then method also here? 110

110

So in this case, let's just log the response 111

111

or we could have called it data, 112

112

but that's not really important here 113

113

and here the error, 114

114

and lets just also log to the console in case there is any. 115

115

And so now we have "Request took too long." 116

116

But that was very fast. 117

117

I went here, we have to multiply it by a 1000. 118

118

So again, this one takes milliseconds and not just seconds. 119

119

Okay, so we got to Tanzania pretty fast. 120

120

And so it was faster than one second. 121

121

And so therefore it did not timeout. 122

122

But let's now try 0.1 seconds. 123

123

And so now we see that the request took too long. 124

124

So 0.1 seconds was not enough 125

125

for this request here to get finished. 126

126

And you will have to experiment with different values here 127

127

because this is going to depend on your internet connection. 128

128

So let's see 0.2 seconds. 129

129

And so now the request was actually fast enough 130

130

so that it didn't timeout. 131

131

So with 0.15 seconds, again it takes too long. 132

132

And so then this promise here is the result of Promise.race. 133

133

So that's pretty useful. 134

134

And in the real world 135

135

of course you will use a larger number. 136

136

Let's say like five seconds. 137

137

Now, okay, so that's Promis.race 138

138

and in fact Promise.race and Promise.all 139

139

are by far the two most important promise combinators. 140

140

But let me show you also the other two that we have. 141

141

So the next one 142

142

is Promise.allSettled. 143

143

And this one is a pretty new one. 144

144

It is from ES2020 and it is actually a very simple one. 145

145

So it takes in an array of promises again, 146

146

and it will simply return an array 147

147

of all the settled promises. 148

148

And so again, no matter if the promises got rejected or not. 149

149

So it's similar to Promise.all 150

150

in regard that it also returns an array of all the results, 151

151

but the difference is that Promise.all 152

152

will short circuit as soon as one promise rejects, 153

153

but Promise.allSettled, simply never short circuits. 154

154

So it will simply return 155

155

all the results of all the promises. 156

156

So Promise.allSettled. 157

157

And so now here I will create 158

158

actually the most basic example ever. 159

159

So I will simply fake promises 160

160

by saying Promise.resolve 161

161

Success, all right. 162

162

And so you already know that this here automatically creates 163

163

a promise that is resolved. 164

164

And so we don't have to wait for anything to finish 165

165

like this here, okay? 166

166

So then we can have a couple of more. 167

167

Here we have a rejected one. 168

168

So let's say ERROR and here another one, 169

169

let's say Another success. 170

170

Now, okay, and then here we can just call then 171

171

and let's see. 172

172

Now here we want actually all of the results. 173

173

And so indeed here we get three results, 174

174

even though one of them rejected, okay? 175

175

So this is the result of the three promises 176

176

and yeah, so this is how they look like 177

177

when we do them manually with resolve, reject and resolve. 178

178

Just contrast that with Promise.all, 179

179

so that would then look different. 180

180

So here we would get an error, okay. 181

181

So of course we can also catch the error then. 182

182

And so here we will simply get error and that's again... 183

183

Because the .allpromise combinator will short circuit 184

184

if there is one error, if there is one rejected promise. 185

185

So that's the difference between these two. 186

186

But now let's go to the last one, 187

187

which is Promise.any. 188

188

So like this. 189

189

Now Promise.any is even more modern. 190

190

It is ES2021 and actually at the time of recording, 191

191

this one doesn't work in my browser, 192

192

but probably by the time I'm releasing this course, 193

193

it will work in the latest version of Google Chrome. 194

194

And so let me simply do this here as well. 195

195

So all am gonna do is to just copy this example here 196

196

and then do any, and this is not going to work. 197

197

Let me show you. 198

198

So we get Promised.any is not a function. 199

199

But again in your case, it might already work. 200

200

So let me simply explain what it does. 201

201

So as always Promise.any takes in an array 202

202

of multiple promises and this one will then return 203

203

the first fulfilled promise 204

204

and it will simply ignore rejected promises. 205

205

So basically Promise.any is very similar 206

206

to Promise.race with the difference 207

207

that rejected promises are ignored. 208

208

And so therefore the results of Promise.any 209

209

is always gonna be a fulfilled promise, 210

210

unless of course all of them reject, okay. 211

211

But at the time you're watching this video 212

212

again, this should already work. 213

213

And then maybe you can experiment a little bit with this 214

214

to see the difference between 215

215

all the four Promise combinators. 216

216

And again, the most important ones 217

217

are definitely Promise.all and Promise.race. 218

218

So keep at least these two in mind for your own projects.