Original subtitles

1 1

In the last video we got a glimpse 2

2

into callback hell and it was not pretty. 3

3

So in this lecture, 4

4

let's learn about a modern JavaScript feature called 5

5

promises, so that we can escape callback hell. 6

6

However, before we learn about promises, 7

7

we should actually see one. 8

8

And so let's not replace the old XML HTTP request function 9

9

with the modern way of making AJAX calls. 10

10

And that is by using the Fetch API. 11

11

So let me go up here 12

12

to our first function. 13

13

And I will just copy all of this 14

14

just to see how it used to work and 15

15

how we can do it now. 16

16

Okay. 17

17

So this is how we used to do it. 18

18

And now all we need to do is 19

19

to call fetch and then with our URL. 20

20

So let's just grab that part 21

21

and then specify a Portugal. 22

22

And that's actually it, 23

23

all we have to do now is 24

24

to store the results into a variable 25

25

and let's still call it request here. 26

26

Now there are actually some more options 27

27

that we can specify here 28

28

in the fetch function, if we'd like, 29

29

but to make a simple get request like this one, 30

30

all we really need is to pass in the URL 31

31

and that's it. 32

32

So for more complex AJAX calls, 33

33

the fetch function can take in like an object 34

34

of options as well. 35

35

But again, for now, we don't need that. 36

36

But anyway, let's now give it a safe and well, 37

37

we should also log the request to the console 38

38

to see what happens. 39

39

And so you see 40

40

that the fetch function immediately returned a promise here. 41

41

So as soon as we started to request, 42

42

we stored the result of that 43

43

into the request variable, 44

44

and then as we logged it, 45

45

we immediately got the promise here. 46

46

So let's do that again. 47

47

And again, right away, 48

48

we got something called promise 49

49

and here it says pending. 50

50

So if we open that up, 51

51

then here it says fulfilled. 52

52

And we also have like a value here, 53

53

but I'm not gonna go into full detail just yet. 54

54

So what matters here is 55

55

that now we actually have a promise. 56

56

And so this promise is right now stored in 57

57

this request variable, 58

58

but now what exactly is a promise 59

59

and what can we do with it? 60

60

Well, let's find out. 61

61

So the formal definition of a promise 62

62

is that it's an object that is used basically as a 63

63

placeholder for the future result of 64

64

an asynchronous operation. 65

65

And if that sounds weird to you, 66

66

we can also say that a promise 67

67

is like a container for an asynchronously delivered value 68

68

or even less formal. 69

69

Let's say that a promise is a container for a future value. 70

70

So there you go. 71

71

That's the most distilled down definition 72

72

of what a promise is. 73

73

So a container or a placeholder for a future value, 74

74

and the perfect example of a future value 75

75

is the response coming from an AJAX call. 76

76

So when we start the AJAX call, 77

77

there is no value yet, 78

78

but we know that there will be some value 79

79

in the future. 80

80

And so we can use a promise to handle this future value. 81

81

And don't worry, 82

82

this will really make sense once we go back to code, 83

83

but to understand this concept even better, 84

84

I like to use the analogy 85

85

of a lottery ticket. 86

86

So a promise is just like a lottery ticket. 87

87

So when I buy a lottery ticket, 88

88

essentially I buy the promise that I will receive 89

89

some amount of money 90

90

in the future if I guess the correct outcome, right? 91

91

So I buy the ticket now with the prospect 92

92

of winning money in the future 93

93

and the lottery draw which determines 94

94

if I get the money or not happens asynchronously. 95

95

So of course I don't have to drop everything 96

96

and keep waiting until the lottery draw happens, right? 97

97

Now, in case I did get the correct outcome, 98

98

then I will receive my money 99

99

because I have my lottery ticket, 100

100

which is the promise that I bought. 101

101

Now, what's the big advantage of using promises? 102

102

Well, there are two of them actually, 103

103

first by using promises, 104

104

we no longer need to rely on events 105

105

and callback functions to handle asynchronous results, 106

106

events and callback functions can 107

107

sometimes cause unpredictable results. 108

108

And so this is a big win already, 109

109

but even better with promises, 110

110

we can chain promises for a 111

111

sequence of asynchronous operations 112

112

instead of nesting like we did 113

113

in the last video. 114

114

And with this, 115

115

we can finally escape callback hell, 116

116

which was our initial goal all along 117

117

and by the way, 118

118

promises are an ES6 feature. 119

119

So they became available in JavaScript in 2015. 120

120

And so by now, 121

121

they are widely used by everyone. 122

122

Now, since promises work with asynchronous operations, 123

123

they are time sensitive. 124

124

So they change over time. 125

125

And so promises can be in different states 126

126

and this is what they call the cycle of a promise. 127

127

So in the very beginning, 128

128

we say that a promise is pending. 129

129

And so this is before any value resulting from the 130

130

asynchronous task is available. 131

131

Now, during this time, 132

132

the asynchronous task is still doing its work 133

133

in the background. 134

134

Then when the task finally finishes, 135

135

we say that the promise is settled and there 136

136

are two different types of settled promises and 137

137

that's fulfilled promises and rejected promises. 138

138

So a fulfilled promise is a promise that has 139

139

successfully resulted in a value just as we expect it. 140

140

For example, when we use the promise to fetch data 141

141

from an API, 142

142

a fulfilled promise successfully guts that data, 143

143

and it's now available to being used. 144

144

On the other hand, 145

145

a rejected promise means 146

146

that there has been an error during the asynchronous task. 147

147

And the example of fetching data from an API, 148

148

an error would be for example, 149

149

when the user is offline and can't connect 150

150

to the API server. 151

151

Now going back to the analogy of our lottery ticket, 152

152

the lottery draw is basically the asynchronous task, 153

153

which determines the result. 154

154

Then once the result is available, 155

155

the ticket would be settled. 156

156

Then if we guessed the correct outcome, 157

157

the lottery ticket will be fulfilled 158

158

and we get our money. 159

159

However, if we guessed wrong, 160

160

then the ticket basically gets rejected. 161

161

And all we did was waste our money. 162

162

Now these different states 163

163

are very important to understand because 164

164

when we use promises in our code, 165

165

we will be able to handle these different states in 166

166

order to do something as a result 167

167

of either a successful promise or a rejected one. 168

168

Another important thing about promises is that 169

169

a promise is only settled once. 170

170

And so from there, 171

171

the state will remain unchanged forever. 172

172

So the promise was either fulfilled or rejected, 173

173

but it's impossible to change that state. 174

174

Now, these different states that I showed you here 175

175

are relevant and useful when we use a promise 176

176

to get a result, 177

177

which is called, to consume a promise. 178

178

So we consume a promise 179

179

when we already have a promise, for example, 180

180

the promise that was returned 181

181

from the fetch function, 182

182

right at the beginning of this video, remember. 183

183

But in order for a promise to exist in the first place, 184

184

it must first be built. 185

185

So it must be created in the case of the fetch API, 186

186

it's the fetch function that builds the promise 187

187

and returns it for us to consume. 188

188

So in this case, 189

189

we don't have to build the promise ourselves in 190

190

order to consume it. 191

191

Now, most of the time we will actually 192

192

just consume promises, 193

193

which is also the easier and more useful part. 194

194

And so that's what we will do 195

195

in the next couple of videos. 196

196

But sometimes we also need to build a promise and 197

197

to not just consume it. 198

198

And of course, 199

199

we will also learn how to do 200

200

that a bit later. 201

201

Alright. 202

202

And so now let's actually start using promises 203

203

in the next video.