WEBVTT 1 00:00:01.220 --> 00:00:02.320 In this lecture, 2 00:00:02.320 --> 00:00:05.320 we will learn how to consume a promise. 3 00:00:05.320 --> 00:00:08.430 And in this case, we will consume the promise 4 00:00:08.430 --> 00:00:10.993 that was returned by the fetch function. 5 00:00:13.000 --> 00:00:16.350 So let's now implement the get country data function 6 00:00:16.350 --> 00:00:18.470 from the very first lecture. 7 00:00:18.470 --> 00:00:21.383 But of course, this one using a promise. 8 00:00:22.960 --> 00:00:25.460 So get country data 9 00:00:27.360 --> 00:00:30.433 and so again, here we pass in a country. 10 00:00:33.560 --> 00:00:37.400 And then here, we will want this fetch function 11 00:00:38.800 --> 00:00:41.820 and here again with the country then. 12 00:00:41.820 --> 00:00:46.820 So making this a template literal again and then country. 13 00:00:49.450 --> 00:00:51.580 And as we already know, 14 00:00:51.580 --> 00:00:53.760 calling the fetch function like this, 15 00:00:53.760 --> 00:00:56.250 will then immediately return a promise. 16 00:00:56.250 --> 00:00:58.900 So as soon as we start the request 17 00:00:58.900 --> 00:01:00.130 and in the beginning, 18 00:01:00.130 --> 00:01:02.930 this promise is of course still pending 19 00:01:02.930 --> 00:01:04.820 because the asynchronous task 20 00:01:04.820 --> 00:01:08.490 of getting the data, is still running in the background. 21 00:01:08.490 --> 00:01:11.440 So just as we learned in the last lecture. 22 00:01:11.440 --> 00:01:13.590 Now, of course, at a certain point 23 00:01:13.590 --> 00:01:18.080 the promise will then be settled and either in a fulfilled 24 00:01:18.080 --> 00:01:23.010 or in a rejected state, but for now let's assume success. 25 00:01:23.010 --> 00:01:26.250 So assume that the promise will be fulfilled 26 00:01:26.250 --> 00:01:30.050 and that we have a value available to work with. 27 00:01:30.050 --> 00:01:32.670 And so to handle this fulfilled state, 28 00:01:32.670 --> 00:01:34.980 we can use the then method 29 00:01:34.980 --> 00:01:38.010 that is available on all promises. 30 00:01:38.010 --> 00:01:39.363 So just like this. 31 00:01:40.820 --> 00:01:43.890 So again, this here will return a promise. 32 00:01:43.890 --> 00:01:47.890 And on all promises, we can call the then method. 33 00:01:47.890 --> 00:01:49.510 Now into the then method, 34 00:01:49.510 --> 00:01:51.970 we need to pass a callback function 35 00:01:51.970 --> 00:01:53.440 that we want to be executed 36 00:01:53.440 --> 00:01:56.860 as soon as the promise is actually fulfilled. 37 00:01:56.860 --> 00:01:59.663 So as soon as the result is available. 38 00:02:00.760 --> 00:02:04.270 So a function and then this function 39 00:02:04.270 --> 00:02:06.720 will actually receive one argument 40 00:02:06.720 --> 00:02:09.310 once it's called by JavaScript 41 00:02:09.310 --> 00:02:12.100 and that argument is the resulting value 42 00:02:12.100 --> 00:02:14.540 of the fulfilled promise. 43 00:02:14.540 --> 00:02:17.580 So let me call it response here 44 00:02:17.580 --> 00:02:21.473 because this is the response of an AJAX call in this case. 45 00:02:22.730 --> 00:02:25.090 All right, and that's it. 46 00:02:25.090 --> 00:02:28.913 So this is how we actually handle a fulfilled promise, 47 00:02:30.600 --> 00:02:34.200 but now let's actually do something with the response here. 48 00:02:34.200 --> 00:02:37.623 And as always, I will start by logging it to the console. 49 00:02:40.100 --> 00:02:43.923 But of course, we also need to call this function here. 50 00:02:46.680 --> 00:02:51.040 All right, and so here we now get the response indeed. 51 00:02:51.040 --> 00:02:54.090 And even the type of this object 52 00:02:54.090 --> 00:02:55.793 is actually called response. 53 00:02:57.320 --> 00:02:59.970 Let's just get rid of this here for a second 54 00:03:01.520 --> 00:03:03.793 so we have a cleaner output here. 55 00:03:05.780 --> 00:03:08.190 All right, and so here indeed, 56 00:03:08.190 --> 00:03:12.350 we have a couple of things about the response itself, 57 00:03:12.350 --> 00:03:15.960 for example, here to status code for the headers. 58 00:03:15.960 --> 00:03:17.330 And so if you watch the lecture 59 00:03:17.330 --> 00:03:20.500 about how the web actually works behind the scenes, 60 00:03:20.500 --> 00:03:24.023 then this kind of data here will be familiar to you. 61 00:03:25.040 --> 00:03:27.550 But anyway what we're actually interested in 62 00:03:27.550 --> 00:03:29.150 is the data itself. 63 00:03:29.150 --> 00:03:32.510 And so that data is in the response body here. 64 00:03:32.510 --> 00:03:34.760 So let's click here just to see. 65 00:03:34.760 --> 00:03:39.760 And as we see, the body is basically this readable stream. 66 00:03:40.680 --> 00:03:44.100 All right, and so actually we cannot yet 67 00:03:44.100 --> 00:03:46.440 really look at the data here. 68 00:03:46.440 --> 00:03:49.410 So in order to be able to actually read 69 00:03:49.410 --> 00:03:51.960 this data from the body, 70 00:03:51.960 --> 00:03:55.940 we need to call the json method on the response. 71 00:03:55.940 --> 00:03:59.330 Okay, so json is a method that is available 72 00:03:59.330 --> 00:04:02.493 on all responses of the fetch method. 73 00:04:03.590 --> 00:04:07.640 So what I mean is this, so response dot json. 74 00:04:09.460 --> 00:04:11.420 So again, the json method here 75 00:04:11.420 --> 00:04:13.300 is a method that is available 76 00:04:13.300 --> 00:04:16.530 on all the response objects that is coming 77 00:04:16.530 --> 00:04:18.390 from the fetch function, 78 00:04:18.390 --> 00:04:20.770 so all of the resolved values, 79 00:04:20.770 --> 00:04:25.150 and indeed this response here is in fact a resolved value. 80 00:04:25.150 --> 00:04:26.757 And so therefore it does have 81 00:04:26.757 --> 00:04:29.750 the json method attached to it. 82 00:04:29.750 --> 00:04:31.120 Now, the problem here is 83 00:04:31.120 --> 00:04:33.530 that this json function itself, 84 00:04:33.530 --> 00:04:36.780 is actually also an asynchronous function. 85 00:04:36.780 --> 00:04:37.833 And so what that means, 86 00:04:37.833 --> 00:04:41.400 is that it will also return a new promise. 87 00:04:41.400 --> 00:04:43.770 And that's all a bit confusing 88 00:04:43.770 --> 00:04:47.400 and I really don't know why it was implemented like this, 89 00:04:47.400 --> 00:04:49.920 but this is just how it works. 90 00:04:49.920 --> 00:04:52.910 So anyway, what we need to do now here 91 00:04:52.910 --> 00:04:55.883 is to actually return this promise from here. 92 00:04:56.870 --> 00:05:01.660 Okay, because remember this here will be a new promise. 93 00:05:01.660 --> 00:05:05.770 Okay, and so now we need to handle that promise as well. 94 00:05:05.770 --> 00:05:07.960 All right, and so the way we do that 95 00:05:07.960 --> 00:05:11.173 is to then call another then right here. 96 00:05:13.640 --> 00:05:16.340 So we need another callback function, 97 00:05:16.340 --> 00:05:18.283 this time let's call it data. 98 00:05:20.080 --> 00:05:23.280 And for now let's log it here to the console 99 00:05:23.280 --> 00:05:26.163 and let's give it a save, just to see if it worked. 100 00:05:27.900 --> 00:05:30.410 And yeah, here it is. 101 00:05:30.410 --> 00:05:33.060 So here we are back to having the same data 102 00:05:33.060 --> 00:05:34.870 that we already had before, 103 00:05:34.870 --> 00:05:39.303 but this time using a promise or actually two promises. 104 00:05:40.670 --> 00:05:43.350 So let's recap what happened here. 105 00:05:43.350 --> 00:05:46.760 And the first part here I think, is pretty straight forward 106 00:05:46.760 --> 00:05:50.300 which is this fetch function here returning a promise. 107 00:05:50.300 --> 00:05:52.170 And then we handled that promise 108 00:05:52.170 --> 00:05:54.970 using the then method, right. 109 00:05:54.970 --> 00:05:58.480 But then to actually read the data from the response, 110 00:05:58.480 --> 00:06:02.720 we need to call the json method on that response object. 111 00:06:02.720 --> 00:06:06.160 Now this itself will also return a promise. 112 00:06:06.160 --> 00:06:10.560 And so if we then return that promise from this method 113 00:06:10.560 --> 00:06:14.650 then basically all of this becomes a new promise itself. 114 00:06:14.650 --> 00:06:16.860 And so since this is a promise 115 00:06:16.860 --> 00:06:20.620 we can then again, call the then method on that. 116 00:06:20.620 --> 00:06:23.820 And so then again we have a callback 117 00:06:23.820 --> 00:06:26.600 and this time, we get access to the data 118 00:06:26.600 --> 00:06:31.040 because the resolved value of this promise here 119 00:06:31.040 --> 00:06:33.590 is going to be the data itself. 120 00:06:33.590 --> 00:06:36.660 So basically the data that we're looking for, 121 00:06:36.660 --> 00:06:40.720 which is then this one here, right. 122 00:06:40.720 --> 00:06:42.480 And so now all we have to do 123 00:06:42.480 --> 00:06:47.090 is render country of data zero, okay. 124 00:06:50.010 --> 00:06:51.823 And so here it is. 125 00:06:53.210 --> 00:06:58.010 So we just did the same thing as before, but using promises. 126 00:06:58.010 --> 00:07:00.960 And if we didn't have all of these console dot logs here, 127 00:07:00.960 --> 00:07:03.163 we could actually simplify this a lot. 128 00:07:04.000 --> 00:07:05.180 So let me just copy it 129 00:07:06.260 --> 00:07:09.320 so that we get to keep this version as well 130 00:07:09.320 --> 00:07:13.550 but then we can create a highly simplified version as well. 131 00:07:13.550 --> 00:07:16.200 So getting rid of this console dot log 132 00:07:16.200 --> 00:07:20.190 and this one here, and then we can transform these here 133 00:07:21.100 --> 00:07:22.463 to arrow functions. 134 00:07:25.140 --> 00:07:27.420 And so this is gonna work because this one 135 00:07:27.420 --> 00:07:32.250 will now implicitly return this result here. 136 00:07:32.250 --> 00:07:36.380 So this promise and so then on that promise, 137 00:07:36.380 --> 00:07:38.263 we can call another then method. 138 00:07:40.620 --> 00:07:43.020 All I'm doing here is to simplify the code 139 00:07:43.020 --> 00:07:44.950 that we already had before. 140 00:07:44.950 --> 00:07:48.920 And you see that indeed, it still works. 141 00:07:48.920 --> 00:07:52.460 So what do you think looks cleaner and nicer? 142 00:07:52.460 --> 00:07:57.040 Is it this code here, using fetch and promises 143 00:07:57.040 --> 00:08:00.960 or is this function that we wrote right in the beginning 144 00:08:00.960 --> 00:08:03.030 with all of this weird stuff 145 00:08:03.030 --> 00:08:05.010 that we have going on here 146 00:08:05.010 --> 00:08:07.710 and with this event and listening for the event 147 00:08:08.790 --> 00:08:12.453 and even worse here, with all these nested callbacks. 148 00:08:13.550 --> 00:08:16.260 So I hope that you agree that this here, 149 00:08:16.260 --> 00:08:20.080 is actually a lot nicer but beside being nicer, 150 00:08:20.080 --> 00:08:23.750 the code is also easier to read and to reason about 151 00:08:23.750 --> 00:08:25.370 and as I mentioned before, 152 00:08:25.370 --> 00:08:27.900 that in itself is very important. 153 00:08:27.900 --> 00:08:32.610 So it's very easy to understand that this fetches something 154 00:08:32.610 --> 00:08:34.850 and then we get a response 155 00:08:34.850 --> 00:08:36.960 which will be transformed to json. 156 00:08:36.960 --> 00:08:38.550 And then we take that data 157 00:08:38.550 --> 00:08:41.920 and render the country to the DOM. 158 00:08:41.920 --> 00:08:46.070 Okay, so this almost reads like English sentences 159 00:08:46.070 --> 00:08:48.830 and that's very helpful to understand the code now 160 00:08:48.830 --> 00:08:51.100 and also in the future. 161 00:08:51.100 --> 00:08:54.010 Now, just to finish you might be thinking, 162 00:08:54.010 --> 00:08:57.506 well, we're using callbacks here, right. 163 00:08:57.506 --> 00:08:59.930 And that is actually true. 164 00:08:59.930 --> 00:09:03.020 So promises do not get rid of callbacks, 165 00:09:03.020 --> 00:09:06.840 but they do in fact get rid of callback hell. 166 00:09:06.840 --> 00:09:10.450 So even if this doesn't look like a big change for now, 167 00:09:10.450 --> 00:09:12.060 it will look like a change 168 00:09:12.060 --> 00:09:14.250 after we add the functionality 169 00:09:14.250 --> 00:09:16.130 of loading the neighbor country 170 00:09:16.130 --> 00:09:18.520 like we did in the previous lecture. 171 00:09:18.520 --> 00:09:21.963 And so actually let's go do that now in the next lecture.