Original subtitles

1 1

At this point, 2

2

we have a pretty good idea 3

3

of how to work with async/await, right? 4

4

However, there is one important thing missing. 5

5

So right now, it might still be a little bit unclear 6

6

what an async function actually is and how it works. 7

7

And so let's now fix that. 8

8

So to understand a bit better, 9

9

what's actually happening here. 10

10

Let's start by adding some more console.logs here. 11

11

So let's say, will get location. 12

12

And then in the second one here, we will say, 13

13

finished getting location. 14

14

And if we check the result here, now, 15

15

I hope that you already know 16

16

what the order of the logs here will be. 17

17

So let's see. 18

18

And so indeed, 19

19

immediately we get the first log then the second one. 20

20

And of course only after that 21

21

we get all the logs coming from the async function. 22

22

So again, 23

23

that's because this is an async function 24

24

that runs in the background. 25

25

And so JavaScript immediately moves on 26

26

to the next line here. 27

27

Now, if this was indeed a regular function 28

28

and there would be a console.log in that regular function, 29

29

then of course, that would appear here between one and two. 30

30

Right? Well, let's call this three here, actually. 31

31

So it will then appear between one and three, 32

32

but in this case it's an async function, 33

33

and so therefore it runs in the background 34

34

until the results are there, 35

35

all right. 36

36

But now let's say that we wanted to return some data 37

37

from this function, all right? 38

38

So let's first get rid of all these console.logs here. 39

39

Put this all a bit better together. 40

40

And so here at the end let's now say we wanted to return 41

41

a string like we had previously based on the geocoding data. 42

42

So that data is in dataGeo 43

43

and so let's say you are in 44

44

dataGeo.city 45

45

and then just quickly the country here as well. 46

46

So we return this string here 47

47

and so let's say we now want to get, 48

48

of course that data out here. 49

49

And so for now, let's pretend 50

50

that this is simply a regular function 51

51

and then we would do this, 52

52

we would simply define a variable. 53

53

Then there, we would store that returned value. 54

54

And then here, we could take a look at that, 55

55

but what do you think is going to happen here in this case? 56

56

Well, let's see. 57

57

And so the second thing that is logged to the console here 58

58

is this promise. 59

59

And remember that back then, 60

60

when we first started to work with async/await, 61

61

I told you that an async function always returns a promise. 62

62

And so here is the proof for that. 63

63

And if we think about this, 64

64

then it actually makes sense that here we get a promise 65

65

and not the value that we would like to get. 66

66

So the string here, right? 67

67

The reason for that is that at this point of the code, 68

68

JavaScript has simply no way of knowing yet 69

69

there's a string here that we want 70

70

because the function is still running, 71

71

but it is also not blocking the code out here. 72

72

And so therefore again, at this point, 73

73

JavaScript has no way of knowing 74

74

what will be returned from this function. 75

75

And so therefore all that this function does return 76

76

is a promise. 77

77

Now the value that we return from an async function, 78

78

so again, that's this string here 79

79

will become the fulfilled value of the promise 80

80

that is returned by the function. 81

81

And so that's important to understand. 82

82

So again, this promise that we see down here, 83

83

the fulfilled value of that promise 84

84

is going to be this string here, 85

85

because that is the value that we return 86

86

from the async function 87

87

while at least if there is no error here happening 88

88

in the function, 89

89

but for now, let's assume the success here again. 90

90

So since we know that this here will return a promise, 91

91

we also know how we can actually get the data that we want. 92

92

So all we need to do instead of this here 93

93

is simply, whereAmI, 94

94

let's comment out these two, 95

95

and so this will be our promise. 96

96

Then just like before 97

97

we can use the then method to get the fulfilled value 98

98

of the promise. 99

99

Let's call that one city now. 100

100

All right? 101

101

So we're using the exact same variable name 102

102

like we did here, 103

103

but of course this one here didn't work, 104

104

but here it is going to work. 105

105

Because again, in the then handler, 106

106

this argument that will be passed into the callback function 107

107

is going to be the result value of the promise. 108

108

And so one more time, 109

109

that is this string here that is returned 110

110

from the async function. 111

111

And so now let's see what happens. 112

112

Let's wait for it. 113

113

Now we get our result, you are in Olhao, Portugal. 114

114

And so with this, 115

115

we essentially, successfully returned a value 116

116

from the function. 117

117

Now we will be able to do a little bit better, 118

118

but for now let's think about errors. 119

119

So if any error occurs here in this try block, 120

120

then this return here will never be reached 121

121

because the code will immediately jump 122

122

here to the catch block, right? 123

123

So let's just try to create some error here. 124

124

I will just change this one here, 125

125

so now nothing will work, 126

126

so let's wait for it. 127

127

And so indeed, now we have an error. 128

128

Now here we get undefined from line five, four, three. 129

129

That's this one. 130

130

And so indeed now nothing was returned from the function, 131

131

we get undefined. 132

132

Now what's interesting here is that the log still worked. 133

133

This console.log here, 134

134

which has now logging undefined here is still running, 135

135

which means that this callback function is still running, 136

136

which means that the then method was called, 137

137

which in turn means that this promise here 138

138

was actually fulfilled and not rejected. 139

139

So even though there was an error in the async function, 140

140

the promise that the async function returns 141

141

is still fulfilled and not rejected, right? 142

142

And in fact, if we add a catch handler here, 143

143

then let's see what happens. 144

144

So console.error, 145

145

error.message, 146

146

then our emoji here. 147

147

And actually let's add a two here. 148

148

So the sequence is kind of one, two, three, 149

149

and let's do the same here. 150

150

All right? 151

151

And so we should still get the error from here 152

152

and indeed we do, 153

153

but still it is this callback here that is executed. 154

154

So that's why we get two undefined and not the catch block. 155

155

And so again, 156

156

what that means is that even though there was an error 157

157

in the async function, 158

158

the promise that it returns is still fulfilled. 159

159

Now, if we wanted to fix that, 160

160

if we want to be able to catch that error here as well, 161

161

then we would have to rethrow that error right here. 162

162

Rethrowing the error means to basically 163

163

throw the error again so that we can then propagate it down. 164

164

And so with that, we will manually reject a promise 165

165

that's returned from the async function. 166

166

So let's say reject promise returned from async function. 167

167

So here we can now take the error and throw it again. 168

168

So throw error, 169

169

and so now we get the same error here as we had here. 170

170

So again, it's, cannot read property flag of undefined 171

171

and here the same and with this too. 172

172

So it just coming from here. 173

173

And so sometimes it's important to do this. 174

174

And so rethrowing an error is then the correct solution 175

175

to that problem, all right? 176

176

And now finally, if we wanted to fix the, not the error, 177

177

but the fact that the three is printed before the two, 178

178

well then how would we do that? 179

179

Well, we can simply add a finally here, right? 180

180

Because the finally, as you already know, 181

181

is always gonna be executed. 182

182

So no matter what, 183

183

all right? 184

184

So now we only get the one 185

185

then we should get the two with the error 186

186

and then the number three. 187

187

And indeed, if we remove now the error from here, 188

188

then one, two, three, just as expected, 189

189

all right? 190

190

So I admit that this might've been a little bit confusing, 191

191

but I hope that you understood 192

192

how all the pieces fit together here. 193

193

Now this of course works just fine, but in my opinion, 194

194

there's still a problem here. 195

195

And that problem is the fact that doing this here 196

196

kind of makes this the philosophy of async/await 197

197

with handling promises using then and catch, right? 198

198

So we are mixing the old 199

199

and the new way of working with promises here, 200

200

all in the same code. 201

201

And that's something that I personally don't like. 202

202

So I prefer to always just use async functions 203

203

instead of having to mix them. 204

204

And so let's now go ahead 205

205

and convert this to async/await as well. 206

206

And we can do that because, of course, 207

207

we can treat the promise here that has returned 208

208

just like any other promise. 209

209

And so of course we are able to handle it 210

210

using async/await. 211

211

So that's what we're going to do next. 212

212

Now it would be great if we could simply use await 213

213

without the async function, 214

214

but that doesn't really work, at least for now, 215

215

because there is actually a proposal in the works 216

216

to make this happen, but for now, 217

217

await can only be used inside an async function. 218

218

However, we don't really want a new complete function here, 219

219

and so instead we can use an IIFE. 220

220

So remember IIFEs from way back, 221

221

they are immediately-invoked function expressions. 222

222

And remember that this is how we create one. 223

223

So we write function 224

224

then here the function body, 225

225

and then in the end we simply call it. 226

226

And so of course we can also easily create 227

227

an async 228

228

IIFE as well, 229

229

all right? 230

230

And actually this pattern here 231

231

is one of the last remaining cases for IIFEs, all right? 232

232

And now I actually want to leave the conversion of this 233

233

to the async function for you as a small challenge. 234

234

So please pause the video now 235

235

and take a minute or two 236

236

and write the code yourself here. 237

237

All right. 238

238

So let's start with the try catch block. 239

239

So try catch, here We get access to the error 240

240

and then let's actually immediately do this part. 241

241

And then here we can simply await the whereAmI promise, 242

242

okay? 243

243

And then all we have to do is to store that result 244

244

into the city variable and then log that to the console. 245

245

So that's just this, 246

246

and now finally, this last part here, 247

247

we can simply put it outside of the try catch block. 248

248

And so then it is always gonna be executed no matter what. 249

249

Okay? 250

250

So let's comment this one out 251

251

and we should get the exact same result 252

252

and let's wait for it. 253

253

And here we go. 254

254

So great. We managed to do the conversion 255

255

and now everything is using async/await. 256

256

And so that's much nicer. 257

257

And now we know how to basically return data 258

258

from an async function 259

259

and how to properly receive and handle that returned data. 260

260

Right? 261

261

And actually in the real life, 262

262

this is something that happens all the time. 263

263

So it's pretty common that we have async functions 264

264

calling other async functions 265

265

and returning values between them. 266

266

And so that's the reason why I'm showing you all this. 267

267

To make sure that you really correctly understand 268

268

how async functions work behind the scenes.