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.