Original subtitles

1 1

So at this point of the section, 2

2

you know all about consuming promises 3

3

but we have never actually built our own promise. 4

4

And so let's do that in this lecture. 5

5

And let's go back to our lottery example from the slides 6

6

and basically simulate a lottery 7

7

using a promise here. 8

8

And remember that in that example, 9

9

a fulfilled promise means to win the lottery 10

10

while a rejected promise means to lose. 11

11

So let's get to work 12

12

and we create a new promise using the promise constructor. 13

13

So that's new promise like this. 14

14

So just like many other built-in objects. 15

15

And so what this means is that promises 16

16

are essentially just a special kind of object in JavaScript. 17

17

Now the promise constructor takes exactly one argument 18

18

and that is the so-called executor function. 19

19

So we need to pass in a function here. 20

20

And so again, this one is called executor. 21

21

Now, as soon as the promise constructor runs, 22

22

it will automatically execute this executor function 23

23

that we pass in. 24

24

And as it executes this function here, 25

25

it will do so by passing in two other arguments. 26

26

And those arguments are the resolve and reject functions. 27

27

So reject like this. 28

28

So we will use them here in a second, 29

29

but for now let's actually build this executor function. 30

30

And also we should probably store the result. 31

31

So this new promise in some variable, 32

32

so lottery promise. 33

33

All of this here we'll create a new promise 34

34

that we're gonna store into this variable. 35

35

So it's just like, for example, the fetch function, 36

36

which also creates a new promise. 37

37

Now this executor function that we specified here 38

38

is the function which will contain the asynchronous behavior 39

39

that we're trying to handle with the promise. 40

40

So this executor function 41

41

should eventually produce a result value. 42

42

So the value that's basically 43

43

gonna be the future value of the promise. 44

44

And so let's do exactly that 45

45

right here in the executor function 46

46

and starting with a simplified version. 47

47

Now, in our lottery example, 48

48

let's say that we actually win in 50% of the cases 49

49

and to lose in the other 50%. 50

50

So a very simplified example, 51

51

just to make this a bit more fun. 52

52

And so what I'm gonna do 53

53

is to simply generate a random number 54

54

which remember is gonna be between zero and one. 55

55

And so I can simply say, 56

56

if this number here is greater or equal than 0.5, 57

57

then I want to call the resolve function. 58

58

And so now this is where this resolve function 59

59

that was passed into the executor function comes into play. 60

60

In this situation here, 61

61

we say that we win the lottery. 62

62

And so therefore that means a fulfilled promise. 63

63

And in order to set the promise as fulfilled, 64

64

we use the resolve function. 65

65

So basically calling the resolve function like this, 66

66

will Mark this promise as a fulfilled promise, 67

67

which we can also say a resolved promise. 68

68

And that's the reason why this method here 69

69

is called resolve. 70

70

Now into the resolved function here 71

71

we pass the fulfilled value of the promise 72

72

so that it can later be consumed with the den method. 73

73

So of course we are going to handle 74

74

the results of this promise 75

75

just like we handled any other promise with the den method. 76

76

So again, whatever value we pass 77

77

into the resolve function here 78

78

is gonna be the result of the promise 79

79

that will be available in the den handler. 80

80

And so in this case, let's simply pass in a string here 81

81

and let's use some emoji again to make it a bit more fun. 82

82

And so now let's handle the opposite case. 83

83

So where we basically want to Mark this promise as rejected. 84

84

And so, as you can imagine for that 85

85

we can call the reject function. 86

86

Then into the reject function, 87

87

we pass in the error message 88

88

that we later want to be able in the catch handler, 89

89

so in the catch method. 90

90

So here, let's just say you lost your money 91

91

and then just some poop emoji. 92

92

So give this a safe here. 93

93

So just to quickly recap, before we consume this promise 94

94

here, we created an executor function 95

95

which is gonna be called by this promise constructor 96

96

as soon as it runs, 97

97

so basically immediately. 98

98

Then the promise calls this function 99

99

and passes in the resolve and the reject functions 100

100

so that we can then use them 101

101

to mark the promise as either resolved so as fulfilled 102

102

or as to rejected. 103

103

And so you see that this promise 104

104

is eventually going to move to either 105

105

the fulfilled state or the rejected state. 106

106

So we always need to make sure that the promise ends up 107

107

in one of these two states. 108

108

And so now it's time to actually try this out 109

109

by consuming this promise that we just built. 110

110

So lottery promise 111

111

is going to be a promise object at this point. 112

112

And so then as always, 113

113

we can call the den method, 114

114

and then just like before 115

115

the den method needs a callback function 116

116

that is going to be called 117

117

with the resolved value of the promise. 118

118

So that's call this res here 119

119

and then let's simply log it to the console. 120

120

And of course, once again, this could be any name here. 121

121

And now let's also catch any errors, 122

122

then so here also as always, 123

123

we will simply log it to the console as an error. 124

124

Now, so that's actually it already. 125

125

So what do you think this res value here is going to be, 126

126

or this error is going to be. 127

127

Well, as I just explained before 128

128

the resolved value of the promise 129

129

is going to be this one that we pass in here. 130

130

And so therefore the value that we're gonna log 131

131

in the case that the promise is successful 132

132

is going to be exactly this string 133

133

that we passed into the result function 134

134

and the same is to with the error. 135

135

So the error here is going to be simply this one 136

136

because that's the string that we passed 137

137

into the reject function. 138

138

So let's see and indeed we get or error, 139

139

so you lost your money. 140

140

And so as we keep reloading, 141

141

we should then see these different states 142

142

according to this random number that was generated here. 143

143

Great, so now we won. 144

144

And so as we keep doing this, 145

145

we can see the different States that the promise will take. 146

146

So that's amazing but however, right now 147

147

this is not really asynchronous yet. 148

148

So let's actually simulate this lottery draw 149

149

by adding a simple timer. 150

150

And so this timer will then simulate 151

151

the time data is passed between buying the lottery ticket 152

152

and actually getting the result. 153

153

So let's add a set time out here. 154

154

So with a simple callback function 155

155

and let's run it for two seconds 156

156

and here we will simply take this code and put it here. 157

157

And then we can also immediately lock something 158

158

to the console, like a lottery draw is happening, 159

159

and then let's add like a crystal ball here. 160

160

So that's exactly also what we had in the slides. 161

161

And now another thing that we can do 162

162

is to, instead of passing just a string here, 163

163

we can also create a new error object. 164

164

So basically creating a real error, 165

165

and so that's a little bit better. 166

166

So just like this. 167

167

And so with this, 168

168

we made this whole promise here 169

169

make a little bit more sense 170

170

because now by using this timer, 171

171

we did actually encapsulate some asynchronous behavior 172

172

into this promise. 173

173

And so that's the whole point of promises 174

174

in the first place. 175

175

So let's give it a safe to see what happens. 176

176

So immediately we get this year 177

177

and then after two seconds the promise was resolved. 178

178

And so then here we handled that result 179

179

and logged it to the console. 180

180

Let's try again, 181

181

and of course, again, this one comes immediately 182

182

and we win again. 183

183

Let's see if we can lose, 184

184

and apparently we can only ever win. 185

185

Nah, but here you go. 186

186

So now we get the error message just like before 187

187

but we also now see there is an error, 188

188

and it also tells us where this error is coming from. 189

189

So right at line two, nine two, 190

190

so that's right here. 191

191

And so indeed actually creating a new error object 192

192

is actually a bit better. 193

193

Great, so this is how we encapsulate 194

194

any asynchronous behavior into a promise. 195

195

So how we abstracted away in a very nice way, 196

196

just like we did here. 197

197

And then all we have to do 198

198

is to consume that promise like this. 199

199

And so this is a really nice and helpful pattern. 200

200

Now, in practice, most of the time all we actually do 201

201

is to consume promises. 202

202

And we usually only built promises 203

203

to basically wrap old 204

204

callback based functions into promises. 205

205

And this is a process that we call promisifying. 206

206

So basically promisifying 207

207

means to convert callback based asynchronous behavior 208

208

to promise based. 209

209

Let's see that in action a little bit. 210

210

And so what we're gonna do 211

211

is to actually promisify the set timeout function 212

212

and create a wait function. 213

213

So let's create a function called wait 214

214

and this function is going to take in a number of seconds. 215

215

And so now inside of this function 216

216

we will actually create and return the promise. 217

217

So usually that's always what we do. 218

218

So creating a function 219

219

and then from there returning a promise. 220

220

And so this will then encapsulate 221

221

the asynchronous operation even further. 222

222

So essentially that's also what the fetch function does. 223

223

It's a function that returns a promise, 224

224

and so that is exactly what we will do 225

225

here with this wait function. 226

226

So in a sense this here is a more real world example. 227

227

So promisifying set timeout. 228

228

As I was saying, we are going to return a new promise 229

229

and then or executor function as always, 230

230

and then resolve. 231

231

And in this case, 232

232

we actually don't even need the reject function. 233

233

And that's because it's actually impossible 234

234

for the timer to fail. 235

235

And so therefore 236

236

we will never mark this promise as rejected. 237

237

And so here we don't even need 238

238

to specify debt reject parameter. 239

239

It's just like the array methods like map 240

240

which always receive three arguments 241

241

but most of the time we just use one or two of them. 242

242

And so this is similar, 243

243

but anyway, all we have to do now is to use set timeout. 244

244

And then here the callback function 245

245

that we want to be called after a certain time 246

246

is exactly the resolve function. 247

247

So we can simply do this. 248

248

And in this case, we're actually not even going to pass 249

249

any resolved value into the resolve function 250

250

because that's actually not mandatory. 251

251

And so in the case of this timer, 252

252

it's also not really necessary. 253

253

And so in the case of a timer, 254

254

it's also not really necessary to wait for some value. 255

255

So in this case, all we want to do 256

256

is to basically make our code wait. 257

257

And so no resolved values are needed. 258

258

Now, here, we want to run that timer 259

259

for a certain amount of seconds, 260

260

so we need to multiply that by 1000. 261

261

And so that's actually already it. 262

262

Now, we could improve this even further here 263

263

or just make it smaller by using error functions. 264

264

And you can do that if you want to have some fun with that, 265

265

but for now I will simply now consume this promise. 266

266

So let's call or wait function. 267

267

And so this will now create a promise 268

268

that will wait for two seconds 269

269

and after these two seconds, it will resolve. 270

270

And so we can then handle that. 271

271

And then here in our callback function, 272

272

remember we are not going to receive any resolved value. 273

273

So we just leave this empty 274

274

and then I will simply log, I waited for two seconds. 275

275

And so here in this callback, 276

276

we could now run any code 277

277

that we wanted to be executed after two seconds. 278

278

And then let's actually wait one more second. 279

279

And so just like before 280

280

we now have to return a new promise here, 281

281

so return, wait, and this time just one second. 282

282

And so this is exactly what we did before 283

283

when we wanted to chain two sequential Ajax calls 284

284

using the fetch function. 285

285

So in the result of the first fetch, 286

286

we would create a new fetch and return it. 287

287

And so that's what we're doing here, 288

288

and so then therefore all of this returns a new promise 289

289

and then we can one more time handle that. 290

290

And let's just say again, 291

291

I waited for one second. 292

292

So give it a safe. 293

293

So this one waited for two seconds 294

294

and this one for one second. 295

295

And of course we also still get the result 296

296

from the previous one, 297

297

but for now, this is here what we are interested in. 298

298

And so now with this, 299

299

we have once again a nice chain of asynchronous behavior 300

300

that happens nicely in a sequence 301

301

and all without the callback hill. 302

302

So before I actually showed you what happened 303

303

when we had multiple timers. 304

304

And so basically we could do now 305

305

this same thing like this. 306

306

So that's just a copy of here as a reference. 307

307

And so this example here would be this. 308

308

So one second past, let's just overwrite this one here. 309

309

And then here we can simply duplicate 310

310

this a couple of times. 311

311

So two seconds past, 312

312

three seconds and here 313

313

four seconds past. 314

314

And so that's going to be exactly the same result 315

315

as we had here. 316

316

Of course here it's four, 317

317

but nevermind, that doesn't really matter. 318

318

What matters is that now 319

319

we no longer have this ugly 320

320

and difficult to understand callback hill, 321

321

but instead we have this nice sequence 322

322

of asynchronous behavior. 323

323

Now finally dare also actually a way 324

324

to very easy create a fulfilled 325

325

or a rejected promise immediately. 326

326

And we had actually already done that 327

327

in the previous lecture, 328

328

but it's always good to know that we can do this 329

329

so let me show it to you again. 330

330

So we can use promise.resolve. 331

331

And so basically this is a static method 332

332

on the promise constructor. 333

333

And so here we can then pass in the resolved value, 334

334

so just like we would pass to resolve value right here. 335

335

Again, the difference is that this one here 336

336

will resolve immediately. 337

337

So here, it doesn't matter. 338

338

So just abc and then we can handle that. 339

339

And so again, the values here don't matter 340

340

and then we can also do the same with reject. 341

341

Let's just duplicate this here actually, 342

342

so reject and here to den is not necessary 343

343

because there will be no resolved value anyway. 344

344

And so we can just catch it like this. 345

345

And so these two here should now appear 346

346

at the very beginning. 347

347

Well, actually they don't. 348

348

So let's see, Oh, actually here they are. 349

349

So here is abc and then abc 350

350

here let's just create a new error. 351

351

And so indeed here we got a lottery draws happening 352

352

which comes from the previous promise. 353

353

Right from here, 354

354

and so that's because 355

355

this is basically the first micro task ever. 356

356

And so therefore this first micro task, 357

357

it needs to be executed first. 358

358

And then after this, we have abc 359

359

and then the problem that we created here in the end. 360

360

So this is how we built our own promises 361

361

and how we promisify 362

362

a very simple callback based asynchronous behavior function 363

363

such as set timeout.