Original subtitles

1 1

So now that you're super comfortable with 2

2

consuming premises and also building premises, 3

3

let's turn our attention back to actually consuming premises 4

4

that's because 5

5

since ES 6

6

2017, 7

7

there is now an even better and easier way to consume 8

8

premises, which is called a sync await. 9

9

So let me show you how it works. 10

10

So we start by creating a special kind of function, 11

11

which is an a sync function. 12

12

So in this lecture, we will basically recreate the, 13

13

where am I function that we have been building? 14

14

Where 15

15

am I 16

16

and so function, 17

17

but for now we will pass in the country again, 18

18

to make it simple at the beginning. 19

19

But as I was saying, 20

20

we now need to make this a special kind of function, 21

21

which is an a sync function. 22

22

And we do this by simply adding 23

23

a sync 24

24

here in front of the 25

25

function. 26

26

And so this function is now an asynchronous function. 27

27

So a function that will basically keep running in the 28

28

background while performing the code that inside of it, 29

29

then when this function is done, 30

30

it automatically returns a premise, 31

31

but more on that in the next video 32

32

for now, 33

33

what's important is that inside an a sync function, 34

34

we can have one or more await statements, 35

35

so, await, 36

36

and then here we need a premise. 37

37

And so we can use the premise returned from the fetch 38

38

function 39

39

and so let's know, use or API again, 40

40

to search for a country basically. 41

41

So let's see where we have some information about that. 42

42

And here we go. 43

43

So this is the URL that we have been using. 44

44

So make sure you grab it somewhere from your code. 45

45

And so here, let's now pass in this country again. 46

46

All right. 47

47

So again, this year we'll return a premise. 48

48

And so in an a sync function like this one, 49

49

we can use the await keyword to basically await for the 50

50

result of this premise. 51

51

So basically await will stop decode execution at this 52

52

point of the function until the premise is fulfilled. 53

53

And so until the data has been fetched in this case, 54

54

but now after that explanation, 55

55

you might think isn't stopping the code, 56

56

blocking the execution? 57

57

Well, that's a really good question, 58

58

but the answer is actually no, in this case, 59

59

because stopping execution in an a sync function, 60

60

which is what we have here is actually not a problem because 61

61

this function is running asynchronously in the background. 62

62

And so therefore it is not blocking the main threat of 63

63

execution. 64

64

So it's not blocking the call stack. And in fact, that's, 65

65

what's so special about a single wait. 66

66

So it's the fact that it makes our code look like regular 67

67

synchronous code while behind the scenes. 68

68

Everything is in fact asynchronous. 69

69

All right. 70

70

But anyway, as soon as this premise here is resolved, 71

71

then the value of this whole await expression that we have 72

72

here is going to be the resolved value of the premise. 73

73

And so we can simply store that into a variable. 74

74

So let's call it res 75

75

for response. 76

76

And then here we can take a look at that response. 77

77

And just to show you that this function here is actually 78

78

asynchronous. 79

79

Let's log something to the console before we call it. 80

80

So just first, because this should be printed first, right? 81

81

And then, or actually we should call the function first. 82

82

So where am I 83

83

with 84

84

Portugal? 85

85

But even by doing this, 86

86

this console dot log first will be displayed first, 87

87

because again, this is an a sync function. 88

88

And so once the function is called, 89

89

it is then loaded off to the background. 90

90

And so this Fetcher will be running in the background 91

91

without blocking or main threat. 92

92

And so the code will move on to the next line, 93

93

which is then this console dot log first. 94

94

All right. 95

95

And so 96

96

indeed we got the first 97

97

printed first 98

98

and then here, 99

99

we got the response, 100

100

but this time we got this response in this really nice and 101

101

elegant way. 102

102

So you see here that by using a sync await 103

103

or asynchronous 104

104

code here, Oh, 105

105

really looks and feels like synchronous code. 106

106

So we can simply await until the value of the premise is 107

107

returned basically. 108

108

And then just assign that value to a variable meant that is 109

109

something that was impossible before. 110

110

So before we had to mess with callback functions and dead 111

111

was true in callback hell, 112

112

but also by consuming premises with the then method. 113

113

But now with a sync await, that is just completely gone, 114

114

right? So again, 115

115

this looks now like normal synchronous code where we simply 116

116

assign values to a variable, 117

117

and that makes it so much easier and more clean. 118

118

In my opinion. 119

119

Now, before you start using a sync await all 120

120

over the place, 121

121

you need to first understand that a sink await is in fact, 122

122

simply syntactic sugar over the then method in premises. 123

123

So of course behind the scenes, we are still using premises. 124

124

We are simply using a different way of consuming them here 125

125

in this case, but what we have here. 126

126

So this is essentially exactly the same 127

127

as doing 128

128

it the old way, 129

129

basically. 130

130

So using then and then res 131

131

and then console dot log res 132

132

like we did here. 133

133

So this is exactly the same. 134

134

So let's put that here 135

135

and 136

136

comment it out of course, 137

137

because what we are interested in is indeed a sync await 138

138

right now. 139

139

So now that we know how a sync await works, 140

140

it's time to actually recreate the, where am I a function? 141

141

So first off we need to get the Jason 142

142

out 143

143

of this response, 144

144

right? 145

145

And so remember on the response, 146

146

we need to call 147

147

Jason 148

148

and remember that this itself returns 149

149

a new premise. 150

150

And so previously we would have to return this premise 151

151

and then chain another then handler. 152

152

But now this becomes so much easier. 153

153

All we have to do is to, again, 154

154

await this and then we can store 155

155

the results directly into the data 156

156

variable that we have been using before. 157

157

Right? 158

158

And so here it is. 159

159

So here is the same data as before. 160

160

And so now all we need to do is to render it. 161

161

So render country 162

162

and data 163

163

at position zero, 164

164

and in case you skipped any of the previous videos and don't 165

165

have this render country function, for some reason, 166

166

you can simply get it from the final files of the section, 167

167

from the getup repository. 168

168

So from where you also got the starter files now, okay. 169

169

And 170

170

yeah, 171

171

there is our data 172

172

so render it 173

173

to the page here. 174

174

Great. 175

175

And all without de-chaining of premises like we had before. 176

176

So this is really elegant. One more time, 177

177

simply being able to essentially store the fulfilled premise 178

178

value immediately into a variable without having to mess 179

179

with callback functions now. Okay. 180

180

But now let's actually finish the function here with all the 181

181

other functionality as well. 182

182

So with geolocation and also reverse geo coding. 183

183

So for that, 184

184

we need to get our premise that we built before for, 185

185

for geolocation. 186

186

So this is the one here, 187

187

so let's get it. 188

188

And so 189

189

again, 190

190

a single wait is only about consuming premises. 191

191

The way that we built them is not influenced in any way. 192

192

Now, right? 193

193

So this year is going to work the exact same way. 194

194

And so let's do that here before. 195

195

And so get positioned, 196

196

remember it doesn't need any arguments. 197

197

And so, as you know, 198

198

all we have to do is to now await this and then store the 199

199

result 200

200

into a variable. 201

201

And just like before let's simply destructor this. 202

202

And in fact, let me get the code from before. 203

203

So we don't have to repeat everything. 204

204

So that was this code 205

205

and we also need 206

206

the reverse geo coding. 207

207

Right? 208

208

So let's paste all of that here. 209

209

So what we want here is to get the latitude and longitude 210

210

from position dot Codes. 211

211

So probably we should just call this zero first, 212

212

the position, 213

213

and then from position dot coordinates, 214

214

we get the lat and longitude just like before. 215

215

And then now the next one. 216

216

So now we can use these latitude and longitude and one more 217

217

time plucked then into this reverse geo coding 218

218

API. 219

219

And so now again, 220

220

it becomes a lot easier to basically chain premises 221

221

because we don't have to return anything. 222

222

We don't have to create new then methods and 223

223

we don't have to create new callback functions. 224

224

So all we have to do is to await this 225

225

and 226

226

store the results 227

227

into some variable. 228

228

So res for 229

229

a response, 230

230

but we already have that. 231

231

So that's call it geo for geo coding. 232

232

And so let's take a look at that 233

233

or actually 234

234

not yet, 235

235

because we remember that this is going to be 236

236

just a response. 237

237

And so we need to get the Jason from there 238

238

and yet another 239

239

premise, 240

240

but this is now so easy and so beautiful 241

241

to handle. 242

242

So again, 243

243

data geo 244

244

let's give it a safe just to format it a little 245

245

bit. 246

246

And I will add some comments here. 247

247

So geolocation 248

248

then 249

249

reverse 250

250

geo 251

251

coding 252

252

and then 253

253

country data. 254

254

So just to make sure that it worked, 255

255

let's take a look at 256

256

data geo 257

257

and 258

258

yes, 259

259

this is it, 260

260

right? 261

261

And so again, here at the country property, we got Portugal. 262

262

And so now we can plug that into 263

263

this URL. 264

264

So that's going to be data 265

265

geo 266

266

dot country. 267

267

And so now we can eliminate the country from here 268

268

and we also don't need to pass it in anymore. 269

269

And so, 270

270

let's reload 271

271

and we still get the same data 272

272

about Portugal because that is simply where I am right now 273

273

located. 274

274

But in case you're somewhere else, then, 275

275

you will now get the data about your own country. 276

276

So let's just take a minute and appreciate how beautiful 277

277

this data flow here is. 278

278

Let me just put this comment out here. 279

279

So we don't clutter or a sync function. 280

280

Okay. 281

281

And so we now have all of this in one nice a sync function 282

282

that runs behind the scenes until everything here is 283

283

finished. 284

284

So we are awaiting here one, two, three, four, 285

285

five premises 286

286

in a very easy way. 287

287

And code that now actually looks and feels like normal 288

288

synchronous code. 289

289

So to me personally, 290

290

this a sync await feature was really a huge, 291

291

huge addition to the JavaScript language. 292

292

Now, again, 293

293

just keep in mind that a sync await is just synthetic sugar 294

294

over consuming premises. 295

295

So it's a bit like classes in JavaScript, 296

296

which also hides the true nature of how things work behind 297

297

the scenes. 298

298

But I think that's no problem. 299

299

At least if you already know exactly how premises 300

300

and asynchronous JavaScript actually do work 301

301

behind the scenes. 302

302

And we spent a lot of time in this section 303

303

learning all that. 304

304

And so I'm sure that you will be fine. 305

305

Also a sync await is actually used a lot together with the 306

306

more traditional then method of consuming premises 307

307

as we will see in the next video. 308

308

Now, let me just tell you something, 309

309

which is when we reload too fast here, 310

310

then we should get that same error as before from the 311

311

reverse geo coding where we can only do 312

312

three requests per second or something like that. 313

313

Well, I guess I'm not fast enough here. 314

314

Ah, okay. 315

315

But here we go. 316

316

So here we have to at four or three error. 317

317

And so with this error, our whole example here falls apart. 318

318

So we get this cascade of errors here and nothing works 319

319

anymore. 320

320

And the reason for all of these errors here is because right 321

321

now we actually don't have any error handling here. 322

322

And so let's fix that in the next video.