Original subtitles

1 1

Welcome back to the last lecture of the section. 2

2

And so in this one, we're gonna apply 3

3

everything that we learned 4

4

in the last few videos to Coding Challenge #3. 5

5

And this coding challenge basically has two part. 6

6

So in the first part, I want you to write 7

7

an async function called loadNPause, 8

8

which will basically recreate Coding Challenge #2, 9

9

but this time using async/await. 10

10

And so of course, that is only about the part 11

11

where we actually consume the promise. 12

12

Then you can compare the two versions that you have 13

13

and think about the big differences 14

14

and also see which one you like more. 15

15

Now in order to do this, 16

16

don't forget to set your network tab to Fast 3G. 17

17

Alright? 18

18

So that's part number one, 19

19

basically converting what we did before, 20

20

but then comes part number two, 21

21

which is again a more difficult one. 22

22

And actually in this one, you will do something 23

23

that we didn't do before, 24

24

but I'm sure that with the instructions here, 25

25

you can make it. 26

26

So, what I want you to do 27

27

is to create an async function loadAll, 28

28

and this one receives an array of image path, 29

29

and so that's this one. 30

30

So it's an array which contains the path 31

31

of all three images in the image folder, okay? 32

32

So you receive debt array in the function 33

33

and then I want you to use the map method 34

34

to loop over the array in order to load all the images 35

35

that are here in this array with the createImage function. 36

36

So this one here where we promise a fight, loading an image. 37

37

Okay? 38

38

Of course the map method will then result in a new array 39

39

and you should call this one images like this. 40

40

Now keep in mind that createImage here 41

41

will return a promise. 42

42

And so the callback function of the map method 43

43

needs to be special. 44

44

So you need to consume the promise 45

45

that comes from createImage 46

46

and so therefore, as I said 47

47

the callback function in the map method 48

48

should be a special type of function. 49

49

So I'm not spoiling which function it is, 50

50

but hopefully you can guess what I'm talking about. 51

51

Alright? 52

52

But anyway, next I want you to check out 53

53

this images array in the console 54

54

and is it what you expected? 55

55

So again, here I want you to think 56

56

about the results that you get. 57

57

So these images array, 58

58

and think if you expected it to be like this, 59

59

and also if it makes sense, 60

60

okay? 61

61

And what I just said will make sense once you get there. 62

62

Then in the next step, you should use 63

63

a promise combinator function 64

64

to actually get the images from the array. 65

65

So this is a very important hint right there. 66

66

Then finally, you should also add the parallel class 67

67

to all the images. 68

68

And so once again, you should probably loop over the images 69

69

and then to each of them add to this class. 70

70

So again, this part two here 71

71

actually contains some new parts 72

72

that you will have to figure out on your own 73

73

and experiment a little bit with that. 74

74

But at this point of the course, 75

75

so already pretty deep into it, 76

76

it's probably a good idea that you start experimenting 77

77

with some stuff on your own. 78

78

And so that's why I created this challenge like this. 79

79

So good luck with this take all the time that you need 80

80

and then I see you back here. 81

81

Welcome back here to my solution now. 82

82

So as you see, I already have all the code here 83

83

from Challenge #2 84

84

and so what we're going to change now is 85

85

basically this part here. 86

86

So we will recreate this big then chain 87

87

using now async/await. 88

88

So the function is called loadNPause, 89

89

and it is an async function which doesn't have any arguments 90

90

or missing to function keywords. 91

91

So it doesn't have any arguments 92

92

and so as always, 93

93

we need to wrap everything into a try block 94

94

and in here here, the error. 95

95

And actually right now it is already allowed 96

96

to use catch without the error. 97

97

So that's new in JavaScript previously that wasn't allowed, 98

98

but just to make it consistent, I always used to error here, 99

99

even if I then don't need it. 100

100

But here let's just log it to the console as always. 101

101

Alright. 102

102

So here is the first promise. 103

103

So this one... 104

104

So let's put that here 105

105

and since we're using async/await, 106

106

I will now await that promise 107

107

and store the results into image. 108

108

So that's basically the variable that we have here 109

109

as the barometer in the then method. 110

110

And so that's the same name that makes sense here. 111

111

So image, 112

112

and let's use one here because we're gonna have multiple 113

113

or actually that's not even necessary 114

114

because this time we won't need the currentImg variable, 115

115

okay? 116

116

But more about that once we reach that point. 117

117

So again, the image is of course, the result of this 118

118

successful promise. 119

119

Alright? 120

120

And so with that, we already translated this year. 121

121

Now what we is to simply log this to the console. 122

122

And so here we have Load image 1 already. 123

123

Then next up we have this wait. 124

124

And so here we can just await for wait 2. 125

125

And just like before, 126

126

since the weight promise does not have any resolved value, 127

127

we actually don't need to save anything to any variable. 128

128

So here we basically just pass 129

129

the execution for two seconds, 130

130

and then what we want to do is this, 131

131

but not exactly this, 132

132

because now instead of current image, 133

133

we can use simply image. 134

134

And that's because now we are 135

135

still here in the same function 136

136

or actually in the same block 137

137

and so in the same scope 138

138

while here we defined the image in one function, 139

139

and then we set the style in another function. 140

140

And so then we needed to use this global variable. 141

141

So like this, it is a lot better of course. 142

142

And so now we just need to do the same for image two. 143

143

So, again we don't need the external variable. 144

144

We can now simply reassign image. 145

145

So image 2, then image 2 loaded, 146

146

and the rest works simply exactly the same. 147

147

Here let's just change to error 148

148

and with that, we should already be good to go. 149

149

So loadNPause, 150

150

and here let me comment this out 151

151

so that the same logic doesn't happen twice. 152

152

And so this is already part one. 153

153

Let's set on network here to Slow, 154

154

or actually Fast 3G, 155

155

And let's actually inspect the images arriving here. 156

156

So I think that this now part here is really helpful. 157

157

So seeing everything arrive, 158

158

it's just a bit difficult. 159

159

But anyway, let's just try it. 160

160

And so here you see the image loading. 161

161

And so then here was the waiting time of two seconds 162

162

and then the next image loaded and finished. 163

163

So again, image 1 loaded during all this time, 164

164

then we had or two second waiting time right here. 165

165

And then during this time, the second image loaded, 166

166

and here we can actually get all this detail about that. 167

167

So this is really interesting stuff 168

168

if you want to dig deep into this. 169

169

Alright? 170

170

But anyway, that's part one. 171

171

And so now let's go to part two 172

172

to create this async function called loadAll 173

173

which receives image array. 174

174

And then we loop over the array and create an array images. 175

175

So just keeping these names in mind. 176

176

So part two will be, 177

177

loadAll is an async function 178

178

which takes an imgArr. 179

179

Then is always this block. 180

180

So try catch. 181

181

And now here, we have to create that images array, 182

182

which is the result of imgArr.map. 183

183

But now we need to think about the callback function here, 184

184

right? 185

185

So in each iteration of the array, we have one image 186

186

and we want to use the createImage function 187

187

to load that image. 188

188

Now this function here returns a promise, 189

189

right? 190

190

And so we should await that promise. 191

191

Otherwise nothing is going to happen. 192

192

And so here we need to make this function an async function 193

193

so that then in there we can use, await. 194

194

Alright? 195

195

So let's actually pause this one here, just as instructed, 196

196

and instead we will call loadAll with 197

197

this test array. 198

198

Alright. 199

199

And then the instruction was also 200

200

to check out these images array. 201

201

So, images. 202

202

Now, okay? 203

203

And so now let's take a look at the console. 204

204

Let's make it a bit bigger again here. 205

205

And so what we got here are actually three promises. 206

206

So we have an array of promises 207

207

and not the images themselves. 208

208

And this is actually a big source of confusion 209

209

for most async/await beginners. 210

210

And I actually remember really well 211

211

when I first stumbled upon this problem 212

212

and didn't really understand why this was happening. 213

213

However, with all the knowledge 214

214

that you just learned in the section, 215

215

if we really think about is 216

216

then it might actually make sense. 217

217

So, here we have an async function, right? 218

218

And this is an arrow function. 219

219

So we have an implicit return. 220

220

So this is like returning something 221

221

from this callback function in each iteration, right? 222

222

However, as we already know, 223

223

an async function will always return a promise 224

224

and not really the value that we're interested in, right? 225

225

Instead, the value that we want to return 226

226

is going to be the fulfilled value of the promise 227

227

that the async function returns. 228

228

Remember that? 229

229

And so that is exactly what is happening here, 230

230

but it is happening simply three times. 231

231

So we are returning something three times 232

232

from an async function here, 233

233

and so therefore the result will be three promises, okay? 234

234

So just like it happened in that lecture 235

235

where we attempted to return a string 236

236

from one of the functions, remember that? 237

237

So here it is indeed the exact same situation. 238

238

So again, we end up with this array of promises, 239

239

okay? 240

240

But of course behind the scenes, 241

241

the images are already being loaded, 242

242

and so we're basically fine. 243

243

So all we need to do now is to get 244

244

these image elements themselves out of the promise. 245

245

So how can we do that? 246

246

Well, we could take each promise out of the array 247

247

and then manually await it, 248

248

but that wouldn't make much sense. 249

249

First because we would have additional work 250

250

and second, because then that work 251

251

would not be happening in parallel, right? 252

252

But we want it to be happening in parallel 253

253

and therefore we can use Promise.all. 254

254

So Promise.all is perfect for this 255

255

because it already expects an array of images. 256

256

And so this images array is already perfect 257

257

to handle by dysfunction, 258

258

right? 259

259

And so now we simply need to 260

260

store the image elements here. 261

261

So let's call it that into this array. 262

262

So let's then take a look at that. 263

263

And so now this is of course going to take some time. 264

264

So this can only happen once the images are actually loaded. 265

265

And so now indeed, here we go. 266

266

Alright? 267

267

So here are the three image elements and they're now hidden 268

268

and so that's why we need to add the parallel class later. 269

269

So, again this worked because here in this loop, 270

270

of course, the await keyword did its job 271

271

of pausing the execution of the function, right? 272

272

And so therefore only after that, 273

273

we did then Promise.all to actually get 274

274

the image elements out of the promises array. 275

275

So this was a bit tricky 276

276

but maybe you did figure out that 277

277

this is how you solve this problem. 278

278

So once you need to use async await 279

279

in a map method like this, 280

280

which believe me is pretty common, 281

281

then you end up with an array of promises 282

282

that you can then as a next step handle like this. 283

283

So with the Promise.all combinator function. 284

284

And so now what the next step is actually pretty easy. 285

285

All they have to do is to loop over this array 286

286

and add the parallel class to it. 287

287

So image element. 288

288

And so now we don't want a new array. 289

289

We simply want to do something on each of the elements. 290

290

And so img.classlist.add parallel 291

291

like this. 292

292

Let's get rid of this console.log here, 293

293

and in our network tab... 294

294

Oh, this is pretty big. 295

295

So you see the images are all loading there now. 296

296

Right? 297

297

And here we go! 298

298

So now we have the images nicely displayed 299

299

and set side-by-side. 300

300

Let's make it a bit smaller 301

301

so we can actually see something. 302

302

Now and indeed, there we go. 303

303

Let's just see it one more time. 304

304

Also here the resources actually loading. 305

305

To see it, we need to make it even smaller. 306

306

And so you see that down here, 307

307

the three images basically started loading 308

308

all at the same time, 309

309

which is because of this loop here, 310

310

which we'll of course execute 311

311

these three callback functions, all one after another. 312

312

Now, okay? 313

313

Alright. 314

314

And with this, we are actually finished with this challenge 315

315

and also with this whole section. 316

316

So make sure that you understood 317

317

what we did here in this part two, 318

318

because this is pretty important. 319

319

But besides that, your job is now done for this section. 320

320

So really happy to still see you here 321

321

and still learning JavaScript 322

322

and still making progress. 323

323

So well done, you can be really proud of yourself. 324

324

And I really mean that. 325

325

And now I see you back here next time in the next section.