1 00:00:01,340 --> 00:00:03,150 ‫Let's now talk about an amazing 2 00:00:03,150 --> 00:00:06,643 ‫asynchronous JavaScript feature called async/await. 3 00:00:08,040 --> 00:00:11,023 ‫So promises has made our code a lot better already 4 00:00:11,023 --> 00:00:13,340 ‫but we can still do better. 5 00:00:13,340 --> 00:00:16,400 ‫So instead of consuming promises, with the then method, 6 00:00:16,400 --> 00:00:19,380 ‫which still makes us use all these callback functions, 7 00:00:19,380 --> 00:00:21,440 ‫we can use something called async/await. 8 00:00:21,440 --> 00:00:25,040 ‫That is a new feature introduced to JavaScript in ES8, 9 00:00:25,040 --> 00:00:27,710 ‫which will make our lives a lot easier. 10 00:00:27,710 --> 00:00:29,370 ‫So usually when we write code, 11 00:00:29,370 --> 00:00:32,020 ‫we're gonna be consuming promises all the time, 12 00:00:32,020 --> 00:00:34,380 ‫but usually not producing them so much. 13 00:00:34,380 --> 00:00:38,510 ‫And so, async/await makes that a lot easier to do. 14 00:00:38,510 --> 00:00:40,070 ‫Now in order to use async/await, 15 00:00:40,070 --> 00:00:42,623 ‫we need to create a so-called async function. 16 00:00:44,610 --> 00:00:47,570 ‫So let's actually comment out this part here, 17 00:00:47,570 --> 00:00:50,520 ‫so that we don't entirely lose it, in case 18 00:00:50,520 --> 00:00:53,170 ‫you want to keep it here as a reference or something. 19 00:00:55,240 --> 00:01:00,000 ‫So getDogPic is the function that we're gonna write. 20 00:01:00,000 --> 00:01:02,210 ‫And now we need to mark this function 21 00:01:02,210 --> 00:01:04,350 ‫as an asynchronous function. 22 00:01:04,350 --> 00:01:05,883 ‫So we use async here, 23 00:01:07,840 --> 00:01:11,390 ‫and then create the function like we normally do. 24 00:01:11,390 --> 00:01:14,260 ‫So this async keyword here simply means 25 00:01:14,260 --> 00:01:17,430 ‫that this is a special function that is asynchronous. 26 00:01:17,430 --> 00:01:19,780 ‫So basically, one that keeps running in the background 27 00:01:19,780 --> 00:01:22,350 ‫while performing the code that's in it, 28 00:01:22,350 --> 00:01:25,540 ‫while the rest of the code keeps running in the Event Loop. 29 00:01:25,540 --> 00:01:28,680 ‫So these asynchronous functions will do asynchronous work 30 00:01:28,680 --> 00:01:31,873 ‫without ever blocking the Event Loop, okay? 31 00:01:31,873 --> 00:01:33,980 ‫This async function will also 32 00:01:33,980 --> 00:01:35,490 ‫automatically return a Promise. 33 00:01:35,490 --> 00:01:37,723 ‫But more on that a bit later in this video. 34 00:01:38,840 --> 00:01:40,610 ‫For now what's really important to know 35 00:01:40,610 --> 00:01:44,200 ‫is inside an async function we can always have 36 00:01:44,200 --> 00:01:46,420 ‫one or more await expressions 37 00:01:46,420 --> 00:01:48,000 ‫and this is how they work. 38 00:01:48,000 --> 00:01:50,453 ‫So we use await and then the Promise here. 39 00:01:51,540 --> 00:01:55,690 ‫So let's start with this one, okay? 40 00:01:55,690 --> 00:02:00,320 ‫And then we can save the result of that into a variable. 41 00:02:00,320 --> 00:02:01,800 ‫In this case, data. 42 00:02:01,800 --> 00:02:05,470 ‫Okay, and so this here will then be the same 43 00:02:05,470 --> 00:02:08,080 ‫as having this piece of code. 44 00:02:08,080 --> 00:02:10,190 ‫So let's see what happens here. 45 00:02:10,190 --> 00:02:13,060 ‫So this await here will basically stop the code 46 00:02:13,060 --> 00:02:17,680 ‫from running at this point until this Promise is resolved. 47 00:02:17,680 --> 00:02:19,960 ‫Now if the Promise is fulfilled, 48 00:02:19,960 --> 00:02:22,490 ‫which remember means that it was successful, 49 00:02:22,490 --> 00:02:24,660 ‫then the value of the await expression 50 00:02:24,660 --> 00:02:27,540 ‫is the resolved value of the Promise, 51 00:02:27,540 --> 00:02:32,280 ‫which is then finally assigned to the data variable, okay? 52 00:02:32,280 --> 00:02:34,500 ‫So instead of having the Promise 53 00:02:34,500 --> 00:02:36,300 ‫and then the then method on it, 54 00:02:36,300 --> 00:02:39,120 ‫which then gets the data as an argument. 55 00:02:39,120 --> 00:02:41,560 ‫With async/await it's much simpler. 56 00:02:41,560 --> 00:02:45,400 ‫All we do is to basically stop the code from running 57 00:02:45,400 --> 00:02:47,960 ‫at this Promise here, wait until it comes back 58 00:02:47,960 --> 00:02:52,330 ‫with its value and then store that value into a variable. 59 00:02:52,330 --> 00:02:54,230 ‫And like this the code is even easier 60 00:02:54,230 --> 00:02:56,490 ‫to understand than it was before. 61 00:02:56,490 --> 00:02:58,600 ‫And that is the whole point of async/await: 62 00:02:58,600 --> 00:03:02,220 ‫it's to make our code look more like synchronous code 63 00:03:02,220 --> 00:03:04,910 ‫while being in fact still asynchronous 64 00:03:04,910 --> 00:03:08,200 ‫behind the scenes, okay? 65 00:03:08,200 --> 00:03:12,810 ‫So let's keep going with this and just copy the pieces 66 00:03:12,810 --> 00:03:17,060 ‫from this example before into the new one, okay? 67 00:03:17,060 --> 00:03:22,010 ‫So before, we had our Promise then we had our then handler 68 00:03:22,010 --> 00:03:24,750 ‫and then we logged the data to the console. 69 00:03:24,750 --> 00:03:26,380 ‫So that's exactly what we have, 70 00:03:26,380 --> 00:03:29,160 ‫simply in a different way here. 71 00:03:29,160 --> 00:03:31,240 ‫So we get our data stored into the variable 72 00:03:31,240 --> 00:03:33,110 ‫and then log it here. 73 00:03:33,110 --> 00:03:37,210 ‫Next up, we then get the dog image from the API. 74 00:03:37,210 --> 00:03:42,210 ‫So we have the res variable, so that will be this one. 75 00:03:42,260 --> 00:03:44,570 ‫So again, the result of the then handler 76 00:03:46,660 --> 00:03:50,693 ‫and we await this Promise here to come back with the data. 77 00:03:53,250 --> 00:03:55,443 ‫I hope this is starting to make sense now. 78 00:04:00,180 --> 00:04:04,180 ‫So after that, we log this to the console, 79 00:04:04,180 --> 00:04:06,440 ‫so the result of that API call. 80 00:04:06,440 --> 00:04:09,250 ‫And then finally, we use our last Promise 81 00:04:09,250 --> 00:04:12,430 ‫to write that string to a file. 82 00:04:12,430 --> 00:04:15,260 ‫So that is this Promise here, 83 00:04:15,260 --> 00:04:19,110 ‫and this one does not resolve any meaningful value. 84 00:04:19,110 --> 00:04:22,570 ‫And so we don't even need to store anything into a variable. 85 00:04:22,570 --> 00:04:25,050 ‫All we do is to stop the code here 86 00:04:25,050 --> 00:04:28,080 ‫until that writing process is finished. 87 00:04:28,080 --> 00:04:30,580 ‫And then log to the console 88 00:04:32,690 --> 00:04:34,003 ‫this string. 89 00:04:35,561 --> 00:04:39,270 ‫So if you compare this code with what we had before 90 00:04:39,270 --> 00:04:41,640 ‫well that looks a lot cleaner 91 00:04:41,640 --> 00:04:45,170 ‫and a lot easier to understand, doesn't it? 92 00:04:45,170 --> 00:04:47,300 ‫Now, in order to make this work all we have to do 93 00:04:47,300 --> 00:04:50,520 ‫is to actually call this function here. 94 00:04:50,520 --> 00:04:54,080 ‫Give it a save and indeed it still works. 95 00:04:54,080 --> 00:04:56,700 ‫So we still get our result. 96 00:04:56,700 --> 00:04:58,830 ‫Everything still works the same. 97 00:04:58,830 --> 00:05:00,570 ‫So that's amazing, right? 98 00:05:00,570 --> 00:05:02,560 ‫Just one last thing that we need to do here 99 00:05:02,560 --> 00:05:04,170 ‫is our error handling. 100 00:05:04,170 --> 00:05:08,080 ‫Because right now, we're not handling errors anywhere right? 101 00:05:08,080 --> 00:05:10,750 ‫So down here used the catch method, 102 00:05:10,750 --> 00:05:12,650 ‫but right now, we cannot really 103 00:05:12,650 --> 00:05:15,260 ‫attach that anywhere, could we? 104 00:05:15,260 --> 00:05:16,920 ‫So instead, what we do here 105 00:05:16,920 --> 00:05:20,130 ‫is to use something called try-catch. 106 00:05:20,130 --> 00:05:22,860 ‫And actually that has nothing to do with async/await, 107 00:05:22,860 --> 00:05:25,180 ‫it's a standard JavaScript feature. 108 00:05:25,180 --> 00:05:26,853 ‫So let me show you how it works. 109 00:05:28,130 --> 00:05:32,593 ‫So we basically wrap all our code into a try block. 110 00:05:34,150 --> 00:05:35,500 ‫So basically the code will try 111 00:05:35,500 --> 00:05:38,340 ‫to execute whatever is in here. 112 00:05:38,340 --> 00:05:41,240 ‫And then we also need a catch block, 113 00:05:41,240 --> 00:05:44,780 ‫which will have access to an error if there is one. 114 00:05:44,780 --> 00:05:47,950 ‫So if there happens an error in this block here, 115 00:05:47,950 --> 00:05:49,960 ‫it will immediately exit this block, 116 00:05:49,960 --> 00:05:52,060 ‫this try block here, so this one. 117 00:05:52,060 --> 00:05:55,070 ‫And immediately go into the catch block, 118 00:05:55,070 --> 00:05:57,290 ‫and will give us access to the error 119 00:05:57,290 --> 00:05:59,323 ‫that happened in the try block. 120 00:06:00,760 --> 00:06:04,227 ‫So now, all we have to do is to take this piece of code 121 00:06:04,227 --> 00:06:06,510 ‫for this console log, put it here, 122 00:06:06,510 --> 00:06:09,163 ‫give it a save and now it works. 123 00:06:10,320 --> 00:06:11,460 ‫Just to cause an error now, 124 00:06:11,460 --> 00:06:14,120 ‫let's change this one here again. 125 00:06:14,120 --> 00:06:16,970 ‫And indeed, I could not find that file. 126 00:06:16,970 --> 00:06:20,040 ‫So this Promise here rejected, right? 127 00:06:20,040 --> 00:06:23,290 ‫So this Promise, it was rejected and so there was an error 128 00:06:23,290 --> 00:06:26,960 ‫and right away it got into the catch block 129 00:06:26,960 --> 00:06:29,253 ‫and then logged this error into the console. 130 00:06:31,610 --> 00:06:32,443 ‫Put it back. 131 00:06:34,040 --> 00:06:36,930 ‫And now indeed, it works again. 132 00:06:36,930 --> 00:06:39,930 ‫Okay, so that is how async/await works. 133 00:06:39,930 --> 00:06:42,420 ‫So remember we can only use await 134 00:06:42,420 --> 00:06:44,450 ‫if it's inside an async function. 135 00:06:44,450 --> 00:06:46,880 ‫That's why it's always called together, 136 00:06:46,880 --> 00:06:49,270 ‫so always async slash await. 137 00:06:49,270 --> 00:06:53,070 ‫Because these two features, they belong closely together. 138 00:06:53,070 --> 00:06:54,835 ‫So just to quickly recap, 139 00:06:54,835 --> 00:06:57,260 ‫async/await allows us to instead of having 140 00:06:57,260 --> 00:06:59,270 ‫all of these then handlers 141 00:06:59,270 --> 00:07:01,630 ‫with these callback functions in them. 142 00:07:01,630 --> 00:07:05,590 ‫It allows us to make our code look more synchronous. 143 00:07:05,590 --> 00:07:09,180 ‫So all we do is to use the await keyword 144 00:07:09,180 --> 00:07:11,340 ‫in front of our Promise. 145 00:07:11,340 --> 00:07:13,380 ‫And then it will wait for that Promise 146 00:07:13,380 --> 00:07:15,400 ‫to come back with its result. 147 00:07:15,400 --> 00:07:17,000 ‫Just remember that this is what we call 148 00:07:17,000 --> 00:07:19,360 ‫syntactic sugar for promises. 149 00:07:19,360 --> 00:07:22,650 ‫So it simply makes promises look more beautiful, 150 00:07:22,650 --> 00:07:25,610 ‫but behind the scenes everything still works the same 151 00:07:25,610 --> 00:07:28,470 ‫with the Promise logic that I explained to you before. 152 00:07:28,470 --> 00:07:30,240 ‫So again, this is just to make our lives 153 00:07:30,240 --> 00:07:32,750 ‫a bit easier when coding and make our code 154 00:07:32,750 --> 00:07:35,520 ‫look a bit more like synchronous code. 155 00:07:35,520 --> 00:07:37,430 ‫So this is how we implement async/await. 156 00:07:37,430 --> 00:07:38,810 ‫In the next video we will learn 157 00:07:38,810 --> 00:07:42,863 ‫a bit more about how async functions actually work.