Original subtitles

1 1

Let's now keep promisifying things 2

2

and this time around, 3

3

we're gonna promisify the geolocation API, 4

4

and this is gonna be really cool 5

5

because it will allow us to take the small app 6

6

that we built in the last coding challenge 7

7

to the next level. 8

8

Now we used the geolocation API before, 9

9

and so let's start by reviewing how it works. 10

10

So remember we use navigator 11

11

.geolocation.getcurrentposition, 12

12

and then this function here accepts two callbacks 13

13

where the first is for the success 14

14

and the second one is for the error. 15

15

So this first callback function 16

16

actually gets access to the position object. 17

17

So let's pass that in as an argument 18

18

to this callback function, 19

19

then let's simply log that to the console. 20

20

So this is our first callback, 21

21

and now let's create a second callback with the error. 22

22

So for example, 23

23

in case that the user does not allow the page to get access 24

24

to the current location 25

25

and so in that case, 26

26

let's just lock that error to the console 27

27

just as we did previously. 28

28

To now, just like before Andy mapped the app, 29

29

JavaScript asks us for permission here 30

30

and when we allow, 31

31

then at some point when JavaScript actually figures out 32

32

the location, then we get that data back 33

33

and so here it is, 34

34

and so again, 35

35

this is actually asynchronous behavior 36

36

in exactly the way that we have been talking about. 37

37

So the code is not blocked, which we can check here. 38

38

So we have a console.log after the geolocation. 39

39

Now part here and still, this part here is locked first 40

40

and so this one happens first 41

41

and so that's because this function here 42

42

basically offloaded its work to the background. 43

43

So to the web API environment in the browser, 44

44

and then immediately it moved on right here 45

45

to the next line. 46

46

So this is very clearly a callback based API. 47

47

So we have to pass in these different callbacks 48

48

and so this is another great opportunity 49

49

to promisify a callback based API, to a promise based API. 50

50

So let's do that 51

51

and it's actually pretty simple. 52

52

So let's create a function here 53

53

just like before with the wait function. 54

54

So get positioned 55

55

and we don't need to pass anything into this one, 56

56

and just like before we are going to return a new promise, 57

57

which we then can handle later on. 58

58

So here we pass in the executer function, 59

59

which gets access to the resolve function 60

60

and the reject function, 61

61

which remember we can use to mark the promise 62

62

as either rejected or fulfilled. 63

63

All right. 64

64

So let's actually grab this code here and paste it here 65

65

and now all we need to change 66

66

is basically what happens here 67

67

in each of these callback functions. 68

68

So remember that this one here 69

69

is the success callback function 70

70

and so it receives the position, 71

71

and so when we have success, we want to resolve the promise. 72

72

So we want to mark it as fulfilled, 73

73

and so therefore we call the result function 74

74

and we pass in that position object, 75

75

because that is actually the fulfilled value 76

76

that we want to get from this promise 77

77

in case that is successful. 78

78

So that's the whole reason 79

79

of using this function in the first place. 80

80

It is to get access to the current position, 81

81

and that is in this object 82

82

and so therefore that's what we're gonna pass into resolve, 83

83

So in the last lecture, 84

84

we just passed a simple string into resolve 85

85

because that would then be the resolved value 86

86

of the promise. 87

87

So basically the future value of the promise, 88

88

but in this case, it has this more meaningful object, 89

89

which we actually need outside of the promise here 90

90

when we handle it. 91

91

But anyway, here we do the same, but with reject. 92

92

Now to this is going to work just fine, 93

93

but we can actually make this even simpler 94

94

because if this function here automatically 95

95

calls these callback functions here, 96

96

and if it also automatically passes in the position, 97

97

then we can simply do this. 98

98

So let's copy it here 99

99

and that will comment this part. 100

100

So we can simply do this resolve and reject 101

101

and that's it. 102

102

So this is exactly the same as this one here. 103

103

So before we specified the callback manually like this, 104

104

but all we did was to take the position 105

105

and pass it down into resolve, 106

106

but here that now happens automatically. 107

107

So now resolve itself is the callback function, 108

108

which will get called with the position, 109

109

and so that's exactly what we do here, 110

110

and the same of course, here with reject, 111

111

and so now let's actually try this out. 112

112

So get position and then we want to handle the result. 113

113

So again, this is exactly the same thing 114

114

that we did previously with the fetch function, 115

115

or also with the wait function 116

116

that we created in the last lecture. 117

117

So let's now log this position to the console 118

118

and for now we don't need the catch block 119

119

and so let's see. 120

120

So it probably is now getting the position in the background 121

121

and yeah, so now we get it back. 122

122

So the promise was marked as successful 123

123

by the resolve function 124

124

and so therefore then here, 125

125

this callback was called in the den handler 126

126

and so the position was passed in and here finally, 127

127

we logged it to the console, so beautiful. 128

128

This worked just fine 129

129

and so we just promisified the geolocation API 130

130

to a promised based API now, 131

131

but now let's actually take it to the next level. 132

132

So remember how in the last coding challenge, 133

133

we built a function which received GPS coordinates 134

134

as an input, and then rendered the corresponding country. 135

135

Well, now we actually got these coordinates via geolocation 136

136

and so we don't even have to pass in any coordinates 137

137

into that function. 138

138

So let me actually get that function 139

139

from the coding challenge. 140

140

So that's this one here 141

141

and so remember here, 142

142

we passed in the latitude and longitude 143

143

and then based on that, we did reverse geocoding, 144

144

which gave us the country 145

145

that basically these coordinates belong to 146

146

and so then based on that country, 147

147

we could get all the data about the country 148

148

and then display it here on our page, 149

149

but now since we have this get positioned function, 150

150

we actually no longer need to even pass in 151

151

these coordinates 152

152

and so now we're gonna be able to build a function 153

153

that will tell us where we are in the world, 154

154

simply based on the geolocation of our device. 155

155

So how cool is that? 156

156

So we no longer needs this one 157

157

and now here this time, 158

158

we are gonna start by getting the position. 159

159

So get positioned 160

160

and then let's do something with the position. 161

161

So we already know what that the coordinates 162

162

are here in this coords property. 163

163

I just don't remember if they are an array or an object 164

164

so let's lock that to the console here for starters. 165

165

So console.log(position.coords). 166

166

All right. 167

167

And so for now, we'll just leave it at that 168

168

and we will not yet connected to this part here. 169

169

So let's run this 170

170

and probably we're gonna get an error when we run this 171

171

and actually we first need to set it up 172

172

with the event handler. 173

173

So remember that's the button and then add event listener 174

174

and of course we could also immediately run the function, 175

175

but I think that it's nice to call it 176

176

only when we click that button 177

177

and here we actually can simply pass in that function now. 178

178

So the, where am I function? 179

179

Because we don't need to pass in any arguments. 180

180

So if we click now, 181

181

so here, then we get an error that latitude is not defined, 182

182

but what we were interested in any way is get the latitude 183

183

and longitude of this coords object, 184

184

and so let's not go ahead and destructure this object. 185

185

So const latitude and longitude equals this, 186

186

but now here we call them lats and lng 187

187

and so let's do this. 188

188

So basically giving them new names 189

189

and next, all we need to do done 190

190

is to chain the next promise, 191

191

and so let's grab this code here and put it in here 192

192

and so just like before 193

193

we now simply create a new promise here, basically, 194

194

and then return that, 195

195

and so then we can handle it here in the next, den handler, 196

196

and so now we have an even longer chain, as you can see, 197

197

this one here still comes from here, 198

198

no need for that anymore 199

199

and so now let's see what happens. 200

200

So a latitude is not defined, 201

201

but that's because I got the syntax here wrong. 202

202

So in the structuring, the equal sign 203

203

is actually to set a default value. 204

204

So this is not what we want. 205

205

We want to still destruct latitude 206

206

and then we want to say that, 207

207

We basically want to create a variable called lat. 208

208

So based on that latitude, variable 209

209

and to your lng to fit this one and this one. 210

210

So let's try again, 211

211

and so it does take some time. 212

212

So in the real world, 213

213

we would have like some loading spinner, 214

214

but it works. 215

215

So we got now the country that I'm currently in, 216

216

which is indeed Portugal 217

217

and all of that was simply done using geolocation. 218

218

So again, we got to the coordinates here, 219

219

then from those coordinates, we got the location. 220

220

So the actual location with country 221

221

and so then from there, 222

222

we got all the data about the country, 223

223

and so now we have the ability of 224

224

basically displaying the flag of a country 225

225

simply based on geolocation on any device. 226

226

Now, just imagine that you would have to handle 227

227

all of these asynchronous operations here 228

228

using callback function. 229

229

So that would literally be hell. 230

230

So therefore the name callback hell, 231

231

but again, with this, 232

232

we have a really nice flat chain of promises 233

233

that's easy to handle and also easy to manage. 234

234

Now. 235

235

But anyway, with this, we saw that We can really promisify 236

236

all kinds of asynchronous stuff in JavaScript. 237

237

For example, we could also promisify, 238

238

the old XML HTTP request function 239

239

that we used in the beginning to make Ajax calls, 240

240

or also we could promisify the image loading example 241

241

that We have seen a couple of times in our slides 242

242

and actually that's exactly what we're gonna do 243

243

in the next coding challenge.