Master Async JavaScript using Async/Await | Quokka JS

Key Takeaways

hello everyone and welcome to another javascript mastery video in this tutorial we will build a simple but extremely educational application that is going to improve your overall knowledge of the structuring and async await the program will take in a currency code we want to convert from and currency code we want to convert to as well as the amount of money the output will result in a correct exchange rate from not one but two different apis in simple words we're going to build a currency converter but on the way we're going to learn a lot about async functions as you can see here we don't have one but two async functions and at the end we also have the promise that all we also have a lot of the structuring happening here you can see we are the structuring the data the structuring the name the structuring the data and then the rates and then at the end we also have some array destructuring right there and finally but most importantly we're going to take a look at this amazing tool called pocads which enables you to see in real time in your editor the values of all the variables you have quoca is a developer productivity tool for rapid javascript development simply said using quoca all values are updated and displayed in your code editor next to your code as you type no more needs for console logs or losing yourself while trying to debug a simple error in here we have the value of the euro the exchange rate and it's all listed immediately on the right side of the editor you can see we're getting the names here and at the end we are getting the full output in real time on the right side that's crazy i was really astonished when i found out about this tool you can install quoca on all major code editors it is supported for visual studio code jetbrains id atom and also sublime text the only thing that you have to do to install it is to go into your code editor of choice and then install the extension that's it in this case we're going to install it together using visual studio code to install it you're going to go to your extensions tab in visual studio code that's this one right there and you're going to type in quoca with a double k you can get it right there you can see 758 000 downloads and you can click install right there i already have it installed so i'm not going to do that and once it's installed that's it we can now run quoca commands so you can now open a command palette by pressing ctrl or command shift b and then this little window is going to pop up you can now start typing and enter a new file so you can click new file right there and we're going to explore some of the pre-built examples that showcase how useful coca really is let's try with a simple array.concat once you click it it's going to open the file for you and now it immediately starts running quoca so what can we do to test it out let's try double-clicking the variable array1 as you can see the values are immediately there or array 2. as you can see on the right side you immediately get their values isn't that crazy finally all console logs are immediately shown on the right side as well as you type quoca is going to let you know if you have any errors or if you misspelled a variable name for example let's try with arr1 instead of array one as you can see coca immediately saved me there let's try adding that array and there we go it immediately shows the green square and we have our values on the right side you might have noticed that we have colored squares on the left side green means that something has been successfully executed red is obviously an error and white means that we didn't even reach that line in our code that's really handy because as you can see the error occurred on line 4 so line 6 wasn't even executed with the pro version of coca you can also use this handy syntax comment and then question mark as you can see we immediately get the values of her variables on the right side i'm still shocked on how well this works finally since we are using quoca we didn't even have to do a console log we can immediately get the values just by hovering over the expression one last thing that i would like to show you in this little quoca demo is the value explorer so if you create an object right there let's try with const person and let's say that that person has a first name let's do john as we always do uh and let's say that the person also has a car that car is going to have a caller of red and it's going to have wheels of four just like that now if you take a look we have this simple person object again with coca we can easily see the values of it that's really handy but kwoka has something even more powerful for seeing where the values are it's called value explorer it's right here on your left side sidebar you can click this quacker icon and it's going to lead you to the value explorer in here you can see where your values are if we type right there you can see that on line 1 we have the array with three elements and then you can see what elements do we have then again with array 2 really simple example but with person now if you click this you can see we have the first name of john but we also have a nested car property right there which we also get all the properties so when could this be extremely useful when you have a huge file with a lot of lines a lot of variables that maybe you didn't declare but you fetched from somewhere with this you could easily know what values are you getting from these variables extremely useful tool there's a link in the description definitely make sure to give it a try the community version is completely free now let's dive into the main project of this video the currency converter [Music] the first thing we're going to do is create a new folder we can name it something like currency converter i have once i'm gonna name it youtube you can just name yours currency converter and then we're going to drag and drop it into our visual studio code in there it should open and then we're going to open our terminal you can open your terminal by going to view and then right there terminal at the top once it opens we're going to run mpm init and then dash y once you do this it's going to generate a package.json and that's going to enable us to run mpm install and then axios we're going to use axios to make our api calls once that is done we can create a file we can name it index.js and all of our code is going to be written in there great so we can now close our terminal and then in here i'm going to paste some code and these will be the links to our apis in this application we're going to receive data from two asynchronous sources first one is called fixer foreign exchange rates and currency conversion json api you'll need to sign up for free so that you can use api's access key this api will provide us with the data needed to calculate exchange rate between currencies you can go to fixer.io link is going to be down in the description and then you can click get free api key after you sign up you should be able to get the api for free so that's the first one and the second one is called rest countries this api will give us all countries that we can use our new currency in so we can go to currency and then in here if we try to make a mock request let's try pasting that right there so for example we can use the cop columbian peso in one country and that country is colombia great so that's how our apis are going to work if we come back in here this code is going to be pasted in the description so you can take a look at it make sure to put your own api key right there and with that we're basically ready to start with coding we're going to run the command palette by pressing command shift p or control shift p on windows and then we're going to click start on current file with quoca this is going to make sure to start the output using the quoca and you should see quoca index.js also green colored squares should appear on the left side great now if we double click something you can see we get the value of it immediately on the right side that's amazing so let's talk about async await for a second because whole this project is going to be about learning async await async await is in my opinion the best way to write asynchronous code it is built on top of promises therefore it is also non-blocking the big difference is that asynchronous code written using async and await looks and behaves a little more like synchronous code this is where all its power lies so how can we await for something well we cannot wait for it inside of asynchronous functions and how do we create asynchronous functions well you create a normal function let's do something like const add is equal to a function that's going to return a plus b whereas a and b are parameters the only thing you have to change to make this function asynchronous is to add the async keyword before the function that's it now if we tried calling the function with 2 and 3 using quoca is going to be pretty straightforward we immediately get the value the thing is the return value of the asynchronous function is not going to be the value itself it's going to be a promise if there is only one thing that you get from this whole video is that you need to remember asynchronous functions return promises they don't return values async functions provide us with a clean and concise syntax that enables us to write less code to accomplish the same outcome we would get with promises the second most important aspect of asynchronous functions is that they can be paused by using a weight so in here if we do something like cons sum is equal to a weight a plus b then we can return the sum basically what we are saying is that and again see how quoca saved me there from this typo is again that we need to wait for the value to come here this example doesn't make any sense in the asynchronous world because calculation of two numbers is synchronous great now that we talked a bit about async functions let's dive right into creating our program our goal for this program is to have three functions not one not two but three asynchronous functions the first one is going to fetch data about currencies so we're going to write that there fetch data about currencies the second function is going to fetch data about countries we said countries that we can use our newly exchanged currency in and the third function is going to gather all that information into a single place and then output it nicely to the user so we can say output data with that said we can now get to creating our first asynchronous function the name of our first function is going to be get exchange rate and it's going to accept two parameters first one is going to be from currency and the second one is going to be to currency so when we're calling this function get exchange rate first thing that we have to provide is from which currency do we want to exchange money from in this case let's do a usd which is american dollar and then the second parameter is going to be the money we want to exchange to so we can put that as euro great now if we save that in here we implement the logic first we have to make a call to our first api to get some data about exchange rates so we can do const and let's do response const response is equal to axios dot get and then in here we're going to put this fixer api that we had stored above now what quoca does extremely well is if you just hover over this response here you're going to get a scrollable window where you can see all the data that we are getting obviously we are not concerned with the data about the request itself we only want to get the data so if you scroll there we go there is a data object belonging inside of our response object so we can console.log that like this let's do response.data keep in mind we don't even have to console.log anymore i can just do this and you can see that we get undefined although we were expecting to see some data that is because from this line to this line the code goes synchronously it happens instantaneously line 12 13 14. by the time that our code go to line 14 this responds the data here javascript didn't yet fetch the data about the response and we couldn't get it that's why we have to tell javascript oh wait a second and that's why we use the update keyword but there's only one more rule to actually await for something we have to have the asynchronous function wrapping that await keyword now if we tried console.logging this we're just hovering over it now you can see we do get real data and i keep saying console log it but using quoca you don't have to log anything anymore so in here we do get the date we get the base currency and we get timestamps the only thing we really need are rates that's why we can access only data that response.data.rates and that should give us some meaningful information now if i do this we get all the data here but it also shows up here and that's it the value of all the currencies in the world when compared to the euro now if you use the structuring before then this seems kind of redundant we don't have to do response that data that rates just to get the rates we only need the rates right so we can immediately structure the things from the response so in here we can use the destructuring assignment which is just an empty object right there so right now once you do that we are immediately inside the response because in here was the place where response was so we can say what do you want to take from the response and in this case we want to take the data right so right now we say we want to data and now we're basically at the same place as you can see we do get the rates but we didn't have to say response that data that rates and finally we can do the same thing to the structure the rates only we're going to use the column sign and then put another pair of curly braces and then in there we're going to say take the rates from the data object and using this syntax we immediately get the rates and now we can do some logic with them so what logic are we going to do well since euro is our base currency we're going to create euro there and we're going to say 1 divided by and now we have to find the currency we want to exchange from in the rates array so we're going to say rates and then from currency now what is this going to be equal to let's see we get 0.80 which means that one us dollar is equal to 0.84 euros great now on the second line we have to calculate the exchange rate the exchange rate is going to be equal to euro times now we have to find the currency we want to exchange to which is rates and then to currency in here let's see what do we get with this nice syntax and as you can see we again get 0.84 because we are transferring immediately to euros but let's try something like australian dollar and if you can see correctly we get 1.4 great that works the only thing this function is going to do is return the exchange rate so that's exactly what we're going to do we can get rid of these comments and that's it amazing using quoca we can immediately see what this function is returning you can see it is an asynchronous function because we have this then there but once we called it up then then it's gonna return 1.4 now on to the second function fetching data about the countries we can use the australian dollar in the second function is going to be called get countries and it's going to be equal to a function of course so an error function it's going to accept one parameter which is going to be equal to currency code basically the three letter acronym for each country and then in there we'll also try to fetch some data this time data about the specific country or more specifically in which countries can a currency be used in so what can we do here well we of course get the response again and now we already learned once we are getting data from an asynchronous source like an api we have to put a weight right there and because of that we also have to make that function asynchronous and then what did they tell you at the beginning what's the most important lesson of this video asynchronous functions return promises and you'll see what do i mean by that at the end of this video now we are awaiting axios that get called and then in there we're gonna use a template string first thing in here is going to be the rest api countries link so that's going to be this one here and then we're going to do forward slash and then another pair of a template variable and it's going to be currency code so now this is giving us some data let's see what data are we getting again with quoca it is extremely easy we have to call the function get countries we're going to call it with something like let's do australian dollar we double click the response we hover over it and we immediately get data again we are not concerned with the request data the only thing that we need is the data object inside of there so we can find it we don't even have to search for it because every axios call always has that response data so we already know that it is in there if we try hovering over this you can see we get all the countries that we can use the australian dollar in one of them being antartica i didn't know that great we also have australia and christmas island great amazing so now we're going to immediately structure that data as we do here and get the same values of course if you can see that that's it we again get an array of countries with a lot of more values there but the only thing that we need from these countries is going to be just the name so to do that we're going to map or this array so that's going to be data.map and in each thing we get the country information right well if we return the country then again we would get all of this because we're returning the whole object we're not doing anything but we only want to return country dot name and now if we actually hover over this we should see only the names of the countries and you can see we get a nice looking array with all the countries right there again how easy it is with guacajs we can do a short structuring there we're going to immediately destructure the name from the country and then just return the name right there just like that and then if we check what data is equal to we should be able to see let's take a look yeah there we go we get everything but we don't want to look for data we want to look for the thing that we stored our names in so that's going to be return and then data.map we are returning the array of country names from our get countries function just like that again if we put a comment comment and question mark we can see all the values there that does belong to a pro version but you can see all the values right there if you're not getting any of this live data right there make sure to call this function because only then if you call it you can see that these lines appear right there otherwise it's not getting called with that said we are ready to create our third function it's going to be called convert currency because it's going to be doing most of the work convert currency and then right there it's going to be an asynchronous function which is going to accept all three things from currency to currency and it is also going to accept the amount of money we want to transfer that's going to be equal to an arrow function and then in there the first thing we're going to do is just one small thing that's going to help some users with the input we're going to take that input called from currency and we're going to make it equal to the same input but we're going to call the to uppercase method on it because if we enter right there at the start if we tried entering the value of lowercase usd let's see what we get back if we hover over this we get nan nothing number so this api cannot work with values that are not uppercased it's good to have that in mind and we don't want the user to worry about that so that's why we fix it right there and we're going to do the same thing for two currency as well to currency great now we can start getting the data from these two apis as we said asynchronous functions return promises and they don't return the data that we want so to get to the data we need to wait for the promise to be fulfilled so how does that work well we can see that this function right there let's take this for example get countries this function returns an array of country names that's good so now if you want to get to the output of that thing let's do something like const countries to store it in a variable is equal to and then we're going to call get countries and we're going to provide it to currency because we want to get the countries for the currency were exchanged in great so right now let's see what the countries are equal to we of course have to call the function convert currency and let's pass for example australian dollar let's pass the american dollar and then 20 dollars just like that now let's see what this value is going to be equal to you can see we do get the values here but quoca is really like in front of us all here uh it says then and then gives us the value it basically says what the value is going to be after we make the await keyword but this data isn't really here yet so now let's use that kansa log to see what countries are equal to as you can see it is a promise countries are not an array they're a promise that waits to resolve to actual countries i know it may sound complicated but the only thing you have to do to get the actual data is put that await keyword in front of it and now you can see countries become actual countries that's it and then we can do the same thing to get the data for the exchange rates so we're going to say const exchange rate is going to be equal to a weight we call the function get exchange rate and we pass in two parameters as we said it's going to be from currency and to currency just like that now let's see what the exchange rate is going to be equal to i'm going to console log it just below and if we hover over it we get 0.715 that's good we get the exchange rate now what's happening with this thing right there is that we are first making the api call to this api which takes time let's say that we come into our code we are here at second zero then we wait for this request and then after it's done basically let's say the two seconds passed i'm now exaggerating then we have to also wait two seconds for this api call as well and then after we can finally console log something four seconds have passed that is not ideal so using promises we can do something much more efficient we're going to await for all the promises at once that means that we're going to call this thing at the same time as this thing how do we do that well we say await promise dot all and then in there we pass an array of functions we want to call so we're going to take these functions and then put them right there now we're not going to get values in here so i'm going to delete these variables like that but we will get values right here in front of it we can say const values is equal to a weight of this promise great now since we're in array these are going to be commas and not semicolons and now what is the execution time of this well at the top we are at the zero second and then let's say that both of these calls take two seconds to go now we saved double the time because both of these schools were being made simultaneously there is only one more thing that we have to do to make these calls run simultaneously and that is removing the await keyword before each one when we had a wait we were first doing this one which took let's say two seconds and then we were waiting for the first one to finish and then we were calling this one so that's two plus two is four as we said before but if you remove the await right there then these two are gonna happen simultaneously and we are only going to await for the response of both of them and there we get the values now we are also going to use some array destructuring in here you can see where cons are logging the countries and the exchange rate but we currently don't have them we had them for each thing so now this thing is going to return an array where the first thing is going to be the response of the get exchange rate function and what is the response of the exchange rate function well it is the exchange rate and then the second thing are countries because countries are coming back from the get countries uh function so this is array destructuring in here you can name this anything you want and you can name this anything you want but the only important thing is that the get exchange rate which is the first thing here in this array corresponds to the first index get countries in the same way is now the first index so it's happening on the second place we can now get rid of these comments we just made our app so much more efficient now we have to calculate the converted amount we're going to do that by typing const converted amount which is going to be equal to parenthesis amount times the exchange rate so in here we have the exchange rate and we're going to call the two fixed method on it which is just going to have two decimal places now if we console log the converted amount you can see on the right side it is 14.33 if we move this to fixed it's going to be a longer number as you can see right there it's meaningless we just need two values and now using this converted amount we can finally return a string which is going to be meaningful to the user that's going to look something like this we're going to have a string literal and then in there we're going to have amount from currency these are all variables dynamic variables is worth and now converted amount to currency let's finish this sentence go into the next row and we can say you can spend these in the following countries and then in there we can say countries just like that and now finally how are we going to retrieve the value from this function well since convert currency is an asynchronous function as well we have to make sure to do the dot then on it so if you do that then it accepts one callback function and in there you get the value of the result so we're going to say result right there and we're going to console.log that result and we can also chain the dot catch on it catch is going to happen if the error occurs so in there we're going to say error and console log the error just like that now let's see what do we get if you hover over this function you can see we get that then but now let's try console logging just the result or we can immediately hover over it you can see 20 australian dollars is now worth 14.3 us dollars and you can spend this in the following countries there are a lot of countries so this is hard to read let's try to transfer the dollars to croatian kunas because for a fact i know that there's only one country that you can use the croatian kuna in and now if we try hovering that you can see we get 20 dollars is worth 126 croatian kunas you can spend this in the following countries croatia that's it now we get the values so to receive the value from an asynchronous function you have to chain a dot then and that catch on it or you could do the await syntax but for that we would have to be in another asynchronous function again and finally let's add try catch blocks to deal with error cases in the first function something can go wrong of course we're going to wrap this whole thing in a try and catch block so right there try catch and then we're going to put all this successful data so that happens if everything goes successfully if we do get a data then we come here and return the exchange rate but in there we're going to throw the error if we do any errors so we can say something like throw new error and the error is going to say unable to get currency and then we can say which one from currency and to currency that's it now if something goes wrong if someone calls this function with wrong countries that don't exist we're going to say unable to get currency from currency and to currency as you can see it is extremely easy adding some error handling using try and catch and that's because we are using async and the weight great now let's remove these comments and move to the second function something can go wrong there as well so we're going to wrap this whole thing in a try and catch block that looks like this and we're going to again pull all the successful data at the top cons data return data and then in there we're going to throw new error and that error can say unable to get countries that use and in here we can say currency code just like that if we indent this properly remove the spaces remove the comments and now finally we have the convert currency do we need some error handling here well not really if the error happens then these functions are going to return the error and we're not going to get the final result and to see if everything is finally working we're going to run it in the console we didn't need the console the whole time because we had quoca but now let's just test it out and i just remembered that this has to be const axios is equal require axios if we want to run this in node so we're going to do that and now we can open the terminal and run node index js as you can see we get 20 dollars is worth 126 croatian kunas you can now spend this in following countries croatia let's try with a few more examples let's try calling our function with american dollar and let's see canadian dollar for example recall it and we get 20 dollars is worth 27 canadian dollars you can use them in canada let's try something like australian dollar and we get that 20 australian dollars is worth 19 canadian dollars that's pretty close just before you go away from this video post recording javascript mastery is here now i'm speaking after the video has been recorded i noticed some things while i was editing first of all for the last few minutes of the video you might have noticed that we also had a weight right there that is a mistake as explained in the video we don't have the await keyword inside of the promise that all calls we only have it before the promised at all and the last thing that i wanted to tell you is that if you're using node 14.3 or later you have access to something called top level await that means that you should technically be able to create a variable here and then use the await keyword like this and then we should be able to get the value of a result just like that as you can see we do get it top level await is still kind of new so feel free to use the that then and that catch without any troubles but if you want to be advanced if you want to google a bit and see how top level of weight works definitely give it a try that is it for this video we did quite a lot the application is as i said really really simple but extremely educational you learn how async await works how to use the promise at all how to do some destructuring and you also heard about the phenomenal tool called quakajs if you haven't already link is in the description check it out that is it for this video if you have any more video ideas or topics you'd like me to explain feel free to ask in the description also if you'd like me to do a video which explains all the details about what koka offers please let me know in the comments in this video we explored only the main ones like highlighting and the live code but there are many more great features that's going to be it for this video and see you in the next one [Music] you