Original subtitles

1 1

In this lecture, 2

2

we will learn how to consume a promise. 3

3

And in this case, we will consume the promise 4

4

that was returned by the fetch function. 5

5

So let's now implement the get country data function 6

6

from the very first lecture. 7

7

But of course, this one using a promise. 8

8

So get country data 9

9

and so again, here we pass in a country. 10

10

And then here, we will want this fetch function 11

11

and here again with the country then. 12

12

So making this a template literal again and then country. 13

13

And as we already know, 14

14

calling the fetch function like this, 15

15

will then immediately return a promise. 16

16

So as soon as we start the request 17

17

and in the beginning, 18

18

this promise is of course still pending 19

19

because the asynchronous task 20

20

of getting the data, is still running in the background. 21

21

So just as we learned in the last lecture. 22

22

Now, of course, at a certain point 23

23

the promise will then be settled and either in a fulfilled 24

24

or in a rejected state, but for now let's assume success. 25

25

So assume that the promise will be fulfilled 26

26

and that we have a value available to work with. 27

27

And so to handle this fulfilled state, 28

28

we can use the then method 29

29

that is available on all promises. 30

30

So just like this. 31

31

So again, this here will return a promise. 32

32

And on all promises, we can call the then method. 33

33

Now into the then method, 34

34

we need to pass a callback function 35

35

that we want to be executed 36

36

as soon as the promise is actually fulfilled. 37

37

So as soon as the result is available. 38

38

So a function and then this function 39

39

will actually receive one argument 40

40

once it's called by JavaScript 41

41

and that argument is the resulting value 42

42

of the fulfilled promise. 43

43

So let me call it response here 44

44

because this is the response of an AJAX call in this case. 45

45

All right, and that's it. 46

46

So this is how we actually handle a fulfilled promise, 47

47

but now let's actually do something with the response here. 48

48

And as always, I will start by logging it to the console. 49

49

But of course, we also need to call this function here. 50

50

All right, and so here we now get the response indeed. 51

51

And even the type of this object 52

52

is actually called response. 53

53

Let's just get rid of this here for a second 54

54

so we have a cleaner output here. 55

55

All right, and so here indeed, 56

56

we have a couple of things about the response itself, 57

57

for example, here to status code for the headers. 58

58

And so if you watch the lecture 59

59

about how the web actually works behind the scenes, 60

60

then this kind of data here will be familiar to you. 61

61

But anyway what we're actually interested in 62

62

is the data itself. 63

63

And so that data is in the response body here. 64

64

So let's click here just to see. 65

65

And as we see, the body is basically this readable stream. 66

66

All right, and so actually we cannot yet 67

67

really look at the data here. 68

68

So in order to be able to actually read 69

69

this data from the body, 70

70

we need to call the json method on the response. 71

71

Okay, so json is a method that is available 72

72

on all responses of the fetch method. 73

73

So what I mean is this, so response dot json. 74

74

So again, the json method here 75

75

is a method that is available 76

76

on all the response objects that is coming 77

77

from the fetch function, 78

78

so all of the resolved values, 79

79

and indeed this response here is in fact a resolved value. 80

80

And so therefore it does have 81

81

the json method attached to it. 82

82

Now, the problem here is 83

83

that this json function itself, 84

84

is actually also an asynchronous function. 85

85

And so what that means, 86

86

is that it will also return a new promise. 87

87

And that's all a bit confusing 88

88

and I really don't know why it was implemented like this, 89

89

but this is just how it works. 90

90

So anyway, what we need to do now here 91

91

is to actually return this promise from here. 92

92

Okay, because remember this here will be a new promise. 93

93

Okay, and so now we need to handle that promise as well. 94

94

All right, and so the way we do that 95

95

is to then call another then right here. 96

96

So we need another callback function, 97

97

this time let's call it data. 98

98

And for now let's log it here to the console 99

99

and let's give it a save, just to see if it worked. 100

100

And yeah, here it is. 101

101

So here we are back to having the same data 102

102

that we already had before, 103

103

but this time using a promise or actually two promises. 104

104

So let's recap what happened here. 105

105

And the first part here I think, is pretty straight forward 106

106

which is this fetch function here returning a promise. 107

107

And then we handled that promise 108

108

using the then method, right. 109

109

But then to actually read the data from the response, 110

110

we need to call the json method on that response object. 111

111

Now this itself will also return a promise. 112

112

And so if we then return that promise from this method 113

113

then basically all of this becomes a new promise itself. 114

114

And so since this is a promise 115

115

we can then again, call the then method on that. 116

116

And so then again we have a callback 117

117

and this time, we get access to the data 118

118

because the resolved value of this promise here 119

119

is going to be the data itself. 120

120

So basically the data that we're looking for, 121

121

which is then this one here, right. 122

122

And so now all we have to do 123

123

is render country of data zero, okay. 124

124

And so here it is. 125

125

So we just did the same thing as before, but using promises. 126

126

And if we didn't have all of these console dot logs here, 127

127

we could actually simplify this a lot. 128

128

So let me just copy it 129

129

so that we get to keep this version as well 130

130

but then we can create a highly simplified version as well. 131

131

So getting rid of this console dot log 132

132

and this one here, and then we can transform these here 133

133

to arrow functions. 134

134

And so this is gonna work because this one 135

135

will now implicitly return this result here. 136

136

So this promise and so then on that promise, 137

137

we can call another then method. 138

138

All I'm doing here is to simplify the code 139

139

that we already had before. 140

140

And you see that indeed, it still works. 141

141

So what do you think looks cleaner and nicer? 142

142

Is it this code here, using fetch and promises 143

143

or is this function that we wrote right in the beginning 144

144

with all of this weird stuff 145

145

that we have going on here 146

146

and with this event and listening for the event 147

147

and even worse here, with all these nested callbacks. 148

148

So I hope that you agree that this here, 149

149

is actually a lot nicer but beside being nicer, 150

150

the code is also easier to read and to reason about 151

151

and as I mentioned before, 152

152

that in itself is very important. 153

153

So it's very easy to understand that this fetches something 154

154

and then we get a response 155

155

which will be transformed to json. 156

156

And then we take that data 157

157

and render the country to the DOM. 158

158

Okay, so this almost reads like English sentences 159

159

and that's very helpful to understand the code now 160

160

and also in the future. 161

161

Now, just to finish you might be thinking, 162

162

well, we're using callbacks here, right. 163

163

And that is actually true. 164

164

So promises do not get rid of callbacks, 165

165

but they do in fact get rid of callback hell. 166

166

So even if this doesn't look like a big change for now, 167

167

it will look like a change 168

168

after we add the functionality 169

169

of loading the neighbor country 170

170

like we did in the previous lecture. 171

171

And so actually let's go do that now in the next lecture.