1 00:00:01,240 --> 00:00:03,540 In the last video we got a glimpse 2 00:00:03,540 --> 00:00:07,600 into callback hell and it was not pretty. 3 00:00:07,600 --> 00:00:09,000 So in this lecture, 4 00:00:09,000 --> 00:00:12,120 let's learn about a modern JavaScript feature called 5 00:00:12,120 --> 00:00:15,913 promises, so that we can escape callback hell. 6 00:00:17,320 --> 00:00:19,922 However, before we learn about promises, 7 00:00:19,922 --> 00:00:22,720 we should actually see one. 8 00:00:22,720 --> 00:00:27,046 And so let's not replace the old XML HTTP request function 9 00:00:27,046 --> 00:00:31,160 with the modern way of making AJAX calls. 10 00:00:31,160 --> 00:00:33,893 And that is by using the Fetch API. 11 00:00:35,330 --> 00:00:37,260 So let me go up here 12 00:00:37,260 --> 00:00:39,253 to our first function. 13 00:00:40,860 --> 00:00:43,260 And I will just copy all of this 14 00:00:44,890 --> 00:00:47,410 just to see how it used to work and 15 00:00:47,410 --> 00:00:48,563 how we can do it now. 16 00:00:51,690 --> 00:00:52,523 Okay. 17 00:00:54,726 --> 00:00:57,560 So this is how we used to do it. 18 00:00:57,560 --> 00:01:00,461 And now all we need to do is 19 00:01:00,461 --> 00:01:04,263 to call fetch and then with our URL. 20 00:01:05,950 --> 00:01:08,100 So let's just grab that part 21 00:01:08,100 --> 00:01:11,980 and then specify a Portugal. 22 00:01:11,980 --> 00:01:13,810 And that's actually it, 23 00:01:13,810 --> 00:01:15,910 all we have to do now is 24 00:01:15,910 --> 00:01:18,540 to store the results into a variable 25 00:01:18,540 --> 00:01:22,360 and let's still call it request here. 26 00:01:22,360 --> 00:01:24,860 Now there are actually some more options 27 00:01:24,860 --> 00:01:26,420 that we can specify here 28 00:01:26,420 --> 00:01:29,040 in the fetch function, if we'd like, 29 00:01:29,040 --> 00:01:32,400 but to make a simple get request like this one, 30 00:01:32,400 --> 00:01:35,460 all we really need is to pass in the URL 31 00:01:35,460 --> 00:01:37,290 and that's it. 32 00:01:37,290 --> 00:01:39,940 So for more complex AJAX calls, 33 00:01:39,940 --> 00:01:43,110 the fetch function can take in like an object 34 00:01:43,110 --> 00:01:44,780 of options as well. 35 00:01:44,780 --> 00:01:47,433 But again, for now, we don't need that. 36 00:01:48,340 --> 00:01:52,010 But anyway, let's now give it a safe and well, 37 00:01:52,010 --> 00:01:55,370 we should also log the request to the console 38 00:01:55,370 --> 00:01:56,593 to see what happens. 39 00:01:57,430 --> 00:01:58,600 And so you see 40 00:01:58,600 --> 00:02:02,790 that the fetch function immediately returned a promise here. 41 00:02:02,790 --> 00:02:05,270 So as soon as we started to request, 42 00:02:05,270 --> 00:02:07,280 we stored the result of that 43 00:02:07,280 --> 00:02:09,690 into the request variable, 44 00:02:09,690 --> 00:02:11,410 and then as we logged it, 45 00:02:11,410 --> 00:02:13,763 we immediately got the promise here. 46 00:02:14,690 --> 00:02:16,710 So let's do that again. 47 00:02:16,710 --> 00:02:18,220 And again, right away, 48 00:02:18,220 --> 00:02:20,680 we got something called promise 49 00:02:20,680 --> 00:02:22,253 and here it says pending. 50 00:02:23,290 --> 00:02:25,130 So if we open that up, 51 00:02:25,130 --> 00:02:27,309 then here it says fulfilled. 52 00:02:27,309 --> 00:02:30,490 And we also have like a value here, 53 00:02:30,490 --> 00:02:33,787 but I'm not gonna go into full detail just yet. 54 00:02:33,787 --> 00:02:36,000 So what matters here is 55 00:02:36,000 --> 00:02:38,680 that now we actually have a promise. 56 00:02:38,680 --> 00:02:41,193 And so this promise is right now stored in 57 00:02:41,193 --> 00:02:43,760 this request variable, 58 00:02:43,760 --> 00:02:46,700 but now what exactly is a promise 59 00:02:46,700 --> 00:02:48,880 and what can we do with it? 60 00:02:48,880 --> 00:02:50,563 Well, let's find out. 61 00:02:51,830 --> 00:02:54,620 So the formal definition of a promise 62 00:02:54,620 --> 00:02:58,030 is that it's an object that is used basically as a 63 00:02:58,030 --> 00:03:00,860 placeholder for the future result of 64 00:03:00,860 --> 00:03:03,100 an asynchronous operation. 65 00:03:03,100 --> 00:03:05,560 And if that sounds weird to you, 66 00:03:05,560 --> 00:03:07,550 we can also say that a promise 67 00:03:07,550 --> 00:03:12,550 is like a container for an asynchronously delivered value 68 00:03:12,590 --> 00:03:14,440 or even less formal. 69 00:03:14,440 --> 00:03:19,260 Let's say that a promise is a container for a future value. 70 00:03:19,260 --> 00:03:20,538 So there you go. 71 00:03:20,538 --> 00:03:23,418 That's the most distilled down definition 72 00:03:23,418 --> 00:03:25,710 of what a promise is. 73 00:03:25,710 --> 00:03:30,012 So a container or a placeholder for a future value, 74 00:03:30,012 --> 00:03:33,011 and the perfect example of a future value 75 00:03:33,011 --> 00:03:37,400 is the response coming from an AJAX call. 76 00:03:37,400 --> 00:03:39,910 So when we start the AJAX call, 77 00:03:39,910 --> 00:03:41,920 there is no value yet, 78 00:03:41,920 --> 00:03:44,350 but we know that there will be some value 79 00:03:45,231 --> 00:03:47,210 in the future. 80 00:03:47,210 --> 00:03:50,020 And so we can use a promise to handle this future value. 81 00:03:50,020 --> 00:03:51,210 And don't worry, 82 00:03:51,210 --> 00:03:55,520 this will really make sense once we go back to code, 83 00:03:55,520 --> 00:03:58,280 but to understand this concept even better, 84 00:03:58,280 --> 00:04:00,030 I like to use the analogy 85 00:04:00,030 --> 00:04:02,590 of a lottery ticket. 86 00:04:02,590 --> 00:04:06,550 So a promise is just like a lottery ticket. 87 00:04:06,550 --> 00:04:09,120 So when I buy a lottery ticket, 88 00:04:09,120 --> 00:04:11,969 essentially I buy the promise that I will receive 89 00:04:11,969 --> 00:04:13,660 some amount of money 90 00:04:13,660 --> 00:04:18,430 in the future if I guess the correct outcome, right? 91 00:04:18,430 --> 00:04:21,610 So I buy the ticket now with the prospect 92 00:04:21,610 --> 00:04:23,830 of winning money in the future 93 00:04:23,830 --> 00:04:26,030 and the lottery draw which determines 94 00:04:26,030 --> 00:04:30,090 if I get the money or not happens asynchronously. 95 00:04:30,090 --> 00:04:33,290 So of course I don't have to drop everything 96 00:04:33,290 --> 00:04:37,043 and keep waiting until the lottery draw happens, right? 97 00:04:37,960 --> 00:04:40,930 Now, in case I did get the correct outcome, 98 00:04:40,930 --> 00:04:42,960 then I will receive my money 99 00:04:42,960 --> 00:04:45,210 because I have my lottery ticket, 100 00:04:45,210 --> 00:04:48,020 which is the promise that I bought. 101 00:04:48,020 --> 00:04:52,270 Now, what's the big advantage of using promises? 102 00:04:52,270 --> 00:04:55,300 Well, there are two of them actually, 103 00:04:55,300 --> 00:04:57,360 first by using promises, 104 00:04:57,360 --> 00:05:00,090 we no longer need to rely on events 105 00:05:00,090 --> 00:05:04,350 and callback functions to handle asynchronous results, 106 00:05:04,350 --> 00:05:06,480 events and callback functions can 107 00:05:06,480 --> 00:05:09,270 sometimes cause unpredictable results. 108 00:05:09,270 --> 00:05:11,756 And so this is a big win already, 109 00:05:11,756 --> 00:05:14,560 but even better with promises, 110 00:05:14,560 --> 00:05:16,520 we can chain promises for a 111 00:05:16,520 --> 00:05:19,230 sequence of asynchronous operations 112 00:05:19,230 --> 00:05:22,070 instead of nesting like we did 113 00:05:22,070 --> 00:05:23,610 in the last video. 114 00:05:23,610 --> 00:05:24,443 And with this, 115 00:05:24,443 --> 00:05:26,750 we can finally escape callback hell, 116 00:05:26,750 --> 00:05:29,910 which was our initial goal all along 117 00:05:29,910 --> 00:05:30,890 and by the way, 118 00:05:30,890 --> 00:05:33,540 promises are an ES6 feature. 119 00:05:33,540 --> 00:05:37,498 So they became available in JavaScript in 2015. 120 00:05:37,498 --> 00:05:38,589 And so by now, 121 00:05:38,589 --> 00:05:41,433 they are widely used by everyone. 122 00:05:42,634 --> 00:05:46,808 Now, since promises work with asynchronous operations, 123 00:05:46,808 --> 00:05:49,400 they are time sensitive. 124 00:05:49,400 --> 00:05:51,510 So they change over time. 125 00:05:51,510 --> 00:05:55,300 And so promises can be in different states 126 00:05:55,300 --> 00:05:59,420 and this is what they call the cycle of a promise. 127 00:05:59,420 --> 00:06:01,030 So in the very beginning, 128 00:06:01,030 --> 00:06:04,160 we say that a promise is pending. 129 00:06:04,160 --> 00:06:07,420 And so this is before any value resulting from the 130 00:06:07,420 --> 00:06:10,450 asynchronous task is available. 131 00:06:10,450 --> 00:06:12,060 Now, during this time, 132 00:06:12,060 --> 00:06:14,951 the asynchronous task is still doing its work 133 00:06:14,951 --> 00:06:17,310 in the background. 134 00:06:17,310 --> 00:06:20,210 Then when the task finally finishes, 135 00:06:20,210 --> 00:06:23,422 we say that the promise is settled and there 136 00:06:23,422 --> 00:06:26,761 are two different types of settled promises and 137 00:06:26,761 --> 00:06:31,761 that's fulfilled promises and rejected promises. 138 00:06:31,820 --> 00:06:34,479 So a fulfilled promise is a promise that has 139 00:06:34,479 --> 00:06:39,479 successfully resulted in a value just as we expect it. 140 00:06:39,570 --> 00:06:42,800 For example, when we use the promise to fetch data 141 00:06:42,800 --> 00:06:44,220 from an API, 142 00:06:44,220 --> 00:06:47,069 a fulfilled promise successfully guts that data, 143 00:06:47,069 --> 00:06:50,900 and it's now available to being used. 144 00:06:50,900 --> 00:06:52,791 On the other hand, 145 00:06:52,791 --> 00:06:53,940 a rejected promise means 146 00:06:53,940 --> 00:06:58,180 that there has been an error during the asynchronous task. 147 00:06:58,180 --> 00:07:01,560 And the example of fetching data from an API, 148 00:07:01,560 --> 00:07:03,610 an error would be for example, 149 00:07:03,610 --> 00:07:06,340 when the user is offline and can't connect 150 00:07:06,340 --> 00:07:07,773 to the API server. 151 00:07:08,760 --> 00:07:12,280 Now going back to the analogy of our lottery ticket, 152 00:07:12,280 --> 00:07:15,437 the lottery draw is basically the asynchronous task, 153 00:07:15,437 --> 00:07:18,320 which determines the result. 154 00:07:18,320 --> 00:07:20,720 Then once the result is available, 155 00:07:20,720 --> 00:07:23,200 the ticket would be settled. 156 00:07:23,200 --> 00:07:26,060 Then if we guessed the correct outcome, 157 00:07:26,060 --> 00:07:28,470 the lottery ticket will be fulfilled 158 00:07:28,470 --> 00:07:30,360 and we get our money. 159 00:07:30,360 --> 00:07:32,500 However, if we guessed wrong, 160 00:07:32,500 --> 00:07:35,100 then the ticket basically gets rejected. 161 00:07:35,100 --> 00:07:38,691 And all we did was waste our money. 162 00:07:38,691 --> 00:07:40,600 Now these different states 163 00:07:40,600 --> 00:07:42,908 are very important to understand because 164 00:07:42,908 --> 00:07:46,010 when we use promises in our code, 165 00:07:46,010 --> 00:07:49,280 we will be able to handle these different states in 166 00:07:49,280 --> 00:07:51,570 order to do something as a result 167 00:07:51,570 --> 00:07:55,540 of either a successful promise or a rejected one. 168 00:07:55,540 --> 00:07:58,530 Another important thing about promises is that 169 00:07:58,530 --> 00:08:01,030 a promise is only settled once. 170 00:08:01,030 --> 00:08:02,180 And so from there, 171 00:08:02,180 --> 00:08:04,793 the state will remain unchanged forever. 172 00:08:05,680 --> 00:08:08,955 So the promise was either fulfilled or rejected, 173 00:08:08,955 --> 00:08:12,054 but it's impossible to change that state. 174 00:08:12,054 --> 00:08:15,960 Now, these different states that I showed you here 175 00:08:15,960 --> 00:08:19,020 are relevant and useful when we use a promise 176 00:08:19,020 --> 00:08:20,530 to get a result, 177 00:08:20,530 --> 00:08:24,030 which is called, to consume a promise. 178 00:08:24,030 --> 00:08:25,720 So we consume a promise 179 00:08:25,720 --> 00:08:28,770 when we already have a promise, for example, 180 00:08:28,770 --> 00:08:30,620 the promise that was returned 181 00:08:30,620 --> 00:08:31,970 from the fetch function, 182 00:08:31,970 --> 00:08:34,416 right at the beginning of this video, remember. 183 00:08:34,416 --> 00:08:38,980 But in order for a promise to exist in the first place, 184 00:08:38,980 --> 00:08:40,643 it must first be built. 185 00:08:41,870 --> 00:08:45,500 So it must be created in the case of the fetch API, 186 00:08:45,500 --> 00:08:48,080 it's the fetch function that builds the promise 187 00:08:49,270 --> 00:08:51,010 and returns it for us to consume. 188 00:08:51,010 --> 00:08:51,870 So in this case, 189 00:08:51,870 --> 00:08:54,470 we don't have to build the promise ourselves in 190 00:08:54,470 --> 00:08:56,160 order to consume it. 191 00:08:56,160 --> 00:08:58,350 Now, most of the time we will actually 192 00:08:58,350 --> 00:09:00,250 just consume promises, 193 00:09:00,250 --> 00:09:03,780 which is also the easier and more useful part. 194 00:09:03,780 --> 00:09:05,580 And so that's what we will do 195 00:09:05,580 --> 00:09:07,620 in the next couple of videos. 196 00:09:07,620 --> 00:09:10,710 But sometimes we also need to build a promise and 197 00:09:10,710 --> 00:09:12,330 to not just consume it. 198 00:09:12,330 --> 00:09:13,810 And of course, 199 00:09:13,810 --> 00:09:15,559 we will also learn how to do 200 00:09:15,559 --> 00:09:16,409 that a bit later. 201 00:09:17,250 --> 00:09:18,200 Alright. 202 00:09:18,200 --> 00:09:21,350 And so now let's actually start using promises 203 00:09:21,350 --> 00:09:22,563 in the next video.