Become A Web Developer - Part 18B: Async Javascript | Andrei Neagoie | Skillshare

Become A Web Developer - Part 18B: Async Javascript

Andrei Neagoie, Senior Software Developer + Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
2 Lessons (38m)
    • 1. Promises

    • 2. Async Await


About This Class

Part B - Async Javascript

This is the tutorial you've been looking for to become a web developer in 2018. It doesn’t just cover a small portion of the industry. In this multipart video series we will covers everything you need to know to get hired: from absolute zero knowledge to being able to put things on your resume that will allow you to live the life you want. 

Sounds too good to be true? Give me 5 minutes of your time to explain to you why I built this course and what is different here than thousands of other courses all over the internet.

  1. There is no wasted time here. We won’t be using outdated technologies like PHP, Wordpress and JQuery. Although still useful, outdated technologies like the above are low paying and demands for them are decreasing. In this course, you will learn the specific technologies that are the most in demand in the industry right now. These include tools and technologies used by the biggest tech companies like Google, Facebook, Instagram, etc… It’s geared specifically for people that want to learn employable skills in 2018.

  2. After finishing this course, you will be able to apply for developer roles, or upgrade your job title as a developer and earn a higher salary. We won't be taking any shortcuts in this course. I am going to take your from absolute zero, where I teach you how the internet works, to mastery, where I show you how to build an image recognition app using a Machine Learning API (a subset of Artificial Intelligence).

  3. This course is taught by an instructor who has worked in silicon valley, and one of the top tech companies in Toronto. I have built large scale applications, and have managed a team of developers. I have worked directly with these technologies. I am not an online marketer or a salesman. I am a senior software developer who loves programming and believes that there needs to be a course out there that actually teaches valuable skills.

  4. I know your time is valuable. You want a course that outlines the best way to learn the topic in simple, well explained methods so that you fully understand topics instead of watching somebody on your screen and having no clue what is going on. I have created this course after consuming hundreds of books, tutorials, and online courses while I was learning. I have taken the best pieces, the best methods, that I have found, and condensed everything so that you can learn in the most efficient way possible. 50 hours of videos doesn't mean much if the instructor isn't engaging or focuses on outdated topics. 

  5. We have a thriving online chat community so you really feel like you are part of a classroom and not just watching videos by yourself. You will have a chance to communicate with fellow students, work on group projects together, and contribute to open source. Anytime you have a question you can ask in the chat and someone will surely be able to help you right away. 
  6. The course is designed to give you employable skills so you can get a job. Here is what one student recently wrote after taking the course and being hired right away: 
    "I’m a self taught dev, who has been out of work for ~6 months. I had some family things that came up that prevented me from seeking permanent employment, so for awhile I was Postmates/Uber delivery driver.
    After taking this course, I immediately got catapulted back to where I was before, but better equipped and with the knowledge to take on the next job. I had just finished the React section when I went to a recent interview, and it really helped me excel. As of today, I am officially re-employed back in the field, and it is all thanks to this course. I had a blast creating the final project, and FINALLY got around to learning SQL statements, and getting to use them in a project. I’m really ecstatic that Andrei went with teaching relational databases over something like MongoDB, which can also be fun, but is less practical for use on the job. So thanks Andrei , I really enjoyed the course and will be making sure to share it with others who find it helpful. I’m also looking forward to the new ES7/8 content that was recently added, and going through the DB stuff again when I go to build a personal project."

In this course, you will be taken through online videos and exercises where you will be able to do the following things by the end:

  • Build real complex applications and websites
  • Build an image recognition app together at the end of the course so you can add it to your portfolio
  • Go into a job interview confident that you understand the fundamental building blocks of web development and the developer space in 2018
  • Be able to go off on your own and grow your skills as a developer having built a solid foundation
  • Learn how front-end, servers, and databases communicate and how they all fit together in the eco system
  • Build your own startup landing page. 
  • Go off and remotely work by being a freelance developer and bid on projects.
  • Know EXACLTY what a day in the life of a developer is like and what the day to day technologies and tools will be that you are using. 

By the end of this course you will be comfortable using the below skills and you will be able to put them on your resume:

  • HTML5
  • CSS
  • Bootstrap 4
  • Javascript (ES6/ES7/ES8)
  • React + Redux
  • Git + Github
  • Node.js
  • Express.js
  • NPM
  • PostgresSQL
  • SQL

This course is the accumulation of all of my years working, learning, and teaching coding and all of the frustrations and incomplete information I have encountered along the way. There is so much information out there, so many opinions, and so many ways of doing things, that unless you have spent the last years working with these technologies in a company, you will never fully understand. So this course is the answer to that exact problem. I have gone through thousands of coding books and online tutorials and bootcamps. I have worked with these tools on real applications. Throughout the years I have taken notes on what has worked, and what hasn't and I've created this course to narrow down the best way to learn and the most relevant information. 

I will succeed if you succeed in this course. Therefore, I will be there every step of the way helping you understand concepts and answer any questions you have.

I am 100% confident that you won't find a course like this out there that is as well organized, and as useful, to build a strong foundation for you to start a new career. We're not going to be building simple todo applications and cat image sliders. We are going to learn actual practical skills that will put you into the workforce. Some unique sections that you won't find anywhere else are:

  • React.js + Redux: you will learn the library that companies like Netflix, Facebook and Instagram use to build fast, scalable applications. This is one of the highest in-demand skill in the industry.
  • A day in the life of a developer: What will your day to day look like and what tools will you use? I will take you through a sample day at a tech company.
  • How does the internet actually work. What is the history of these technologies: I will actually have you understand the underlying concepts of the internet, and how the technologies we have now, have come to be where they are.
  • How do you actually deploy a real life app so that it is secure, and won't get hacked: How does a real life app get out to the public?
  • What is Machine learning and how you can harness it's power: Whether you have heard about it or not, this is something that you will hear more and more in the coming years. Those who understand the high level concepts and can harness it will have an advantage. 
  • What is your developer environment on your computer look like: We will be setting up our computers with all the tools necessary of a developer so you can use the same setup when you go into the workforce.

Why do we teach the above? Because in this day and age, just knowing HTML CSS and Javascript is not good enough and you won't be able to grow in your role and command a higher salary. I am teaching you these things because these are the things you should know in 2018 so that you are miles ahead of the rest. 

Make this the year that you took a risk, you learned highly in demand skills, you had new experiences, and you received new opportunities. I hope you join me in this journey. 

This is the proudest work I have ever done in my life and I am confident that you won't find a course better than this. 

See you inside!

Taught by: 

Andrei is the instructor of the highest rated Web Development course on many platforms. His graduates have moved on to work for some of the biggest tech companies around the world like Apple. He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.  Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the course! 


1. Promises: promises are a new feature and job script as off he s six. But them means they're really useful to have them introduce this part of the language, right? Well, you're absolutely right. Promises are everywhere, and in this video, I'm going to show you what they are, how they work. And hopefully you'll understand why we should all be jumping for joy that we have them instead of call backs. Now, in order to understand promises, let's define it. A promise is an object that may produce a single value sometime in the future, either a result value or reason that it's not result or rejected. A promise may be in one of three possible states who filled, rejected or pending, huh? Let's figure out what that means in this video so that by the end of it that is all going to make sense to you Now, in order to fully grasp the concept must first talk about what we had before promises and that is callbacks. Something like this. When something is done, execute this piece of code callbacks and JavaScript are exactly that. I text my friend Bob and say, Hey, bought what's that really good song by the Backstreet Boys. When Bob has time, he called me back and says, Oh yeah, that song, it's I want it that way And that's exactly what's happening here, too. We have an element that we're adding an event listener, too. And when a user clicks, we're going to have the Colback submit form. That is, once the user clicks, we're gonna answer with Submit form. Let's think of another example. Let's say we're creating a game and we had this move player function that has the distance to move the player and the direction Well, if I wanted to move player 100 to the left, I'd run that once That is done, I wanted to run a callback function, which is to move player 400 to the left again. And then another callback function right after that is done to move player 10 to the right and another callback function to move player 3 30 to go left, and we have something called the Pyramid of Do. This is obviously a simple example, but with coal backs, you'll get this nested nested function and you create this pyramid of really, really complicated quote of this happens then this happens. Then this happens. Then this happens, and it's really, really hard to read. Let me show you a more realistic example. Let's say we had some sort of an app that uses Twitter and let me make this bigger so you can see we have a grab tweets function that the first parameter has the URL. For now. I just simplified it. We just passed Twitter and the Twitter handle and then the callback function after you grab the tweets, which has an error and the tweets. And if there's an error, we throw an error, so that just creates an area and JavaScript, otherwise we're gonna display the tweets. But then, if Andres tweets were successful, then we also want to grab the tweets again. Let's do Elon musk this time and again affair we're gonna throw where otherwise we're gonna display his tweets. And if that's successful, then we're also gonna grab metallic pewter and streets and again if air through air otherwise display tweets. And that doesn't look very pretty, does it? I mean, we have to do the same thing. We have to check for error at each time we have it nested and just overall, we have a lot of repetition of code. Now, promises serve the same purpose as callbacks. So why do we have two things? Well, promises are new and the S six and they're a little bit more powerful. Let me show you what a promise looks like. You remember this move player code? Well, this with a promise, would look something like this. Doesn't that look much much better? But it's really hard to grasp what's happening here without really knowing how to create a promise. So let's start with that. I'm going to remove this and create our very first promise. Will say, Const. I promise equals And this is a new sink tax that you'll just have to get used to. New promise. So we're creating a new promise, and this promise has parameter that either results for rejects. And in here in this function we have the option to let's just say either resolve and let's just do stuff worked or reject, and in this case we have an error. It broke. Now we obviously want to have a conditional statement here will say, if condition in our case will just let it be true for now, if true. So this is if the promise returned, we're going to resolve it. Otherwise, we're going to reject. And here's the thing. This looks confusing without actually knowing the application. But I want you to just have this over here so you can take a look at it as we progress through this video is going to make more and more sense. So now that we have a promise, if I put this into my console, my chrome browser All right. I have the promise now. But how can we get this promise to run now? Well, I can just do promise dot then. So again, once the promises resolve were rejected dot Then I want to get the results, and then we want a console dot log the result. That's it. So let's see what happens here. I'm going to copy this. Pace it on here. Stuff worked. All right, so we ran the promise it ran this part and because we've just made, if equals the truth is going to run the resolve. And the result is going to send stuff worked into the result. And we're gonna console log stuffed work, and you also see over here that the promise is resolved again. If I just log promise here, I see that we have the promise with Stuffed worked. Okay, So based on what we know now, let's just take a look at what we can do with promises. Let's say that now, with stuff worked, I want to grab the result and at on exclamation mark to it and then And this is called chaining and promises. Then after I do that, it's going to return this return the result with the exclamation mark. And in our case, I just want to get the result to and we will just console dot log result to All right, Well, let's see what happens now. So I have my promise just to make sure that we have it here. Perfect. And we're gonna run the promise stuff worked with the exclamation mark. Very cool. But what happens if something happens in between here? We just have a consul lock. But let's say we haven't hair, and that error causes us to throw in there. But what happens now with promises you can actually do something called dot catch, and this will catch any error that the promise may have In our case, we just want to console dot log. And now if I run this, we consul, log the air. Let's just make this a little bit cleaner so that you can see exactly what is happening. So again, copy and paste. There you go. We get the air. If the throw error happens before, let's say it happens above and we want to return this well, if I move the throw era at the top over here, save and again copy and paste, let's clean this up a bit and see that we still get the air. So dot catch catches any years that may happen between the chain's dot net, which is very, very cool. All right, so I have a little question for you. What happens if we do something along this line? Let me just go back to what we have before. You don't have an air in there anymore, but this time we have result to plus the question mark. We're gonna add a question mark to that. We're going to return that we're going to catch with Consulate, dialogue, air, and after that we're going to have a dot then result three, and that result three will have result three. Plus Let's do another exclamation mark and we want a consul. Lock this so again, we're going to console dialogue. This all right? What do you think is gonna happen? Let's see, We save copy and paste and look at that. We have stuffed, worked or stuff or hurt exclamation question. Mark exclamation! So catch on. Lee runs if something fails in between here. But because I placed it before this. If this fails quote I don't get the air Consul. I get an error within our console because we have to dethrone error. But the catch statement Nerva runs. So where you put the catch statement is it's going to check and run if anything, before it fails. Alright, Awesome. So that's how we create a promise. A promise has a resolve and a reject, and so far it's only been result. It's just worked out. We've never run the reject. We'll do that later on. But we see that with a promise. We can give it to a variable and run this and do something with it a synchronously when we run dot then and get the result and do whatever you want with it. We can keep changing it, and we can also catch our air's. A promise is something that you have now that you can use around your coat. Even though you don't have the value just yet. You can just assign it to a variable like we did here, to a constant promise. Now, when would this be a good thing? Well, promises are great for asynchronous program. If you don't remember what that is, make sure you check out my video on how JavaScript works to grasp the concept. When you don't want job script to block the execution of your code, like making a P, I calls grabbing data from a database or maybe optimizing an image. You use a promise so that the task happens in the background. When the promise gets result or rejected, then you'll get that response. Now let's show you something else that promises conduce do that makes them really, really powerful. Let's say that within year we had another promise a const promise to, and this promise again has a resolve reject. Now we can make this a little bit smaller, and this result reject is going to have a set time out. So set time out is a Web ap I. It allows us to time out and run something after a few seconds. So set time out, we're going to say resolve in 100 seconds or 100 milliseconds. The high text. Okay, Don't worry too much about this, Intacs. Essentially, this is saying Run this and return resolve high in 100 milliseconds. Let's also have another promise. That's a promise three. And this one resolves, and one second and the sun's going to say pooky. And then finally 1/4 promise. And this fourth promise is going to resolve. And three seconds. And it's going to say, Is it me your looking for right? So we have these promises well again, A feature that we have is something called promise dot all and promised that whole takes an array off promises in our case, promise one promise to promise three and endless do promise for. That's a lot of promises, and in here we can do a dot then and the values will be returned as an array in the order that they were just written down. And here we can just console dialogue values, but safe. And I'm going Teoh, copy this into a console. Actually, letters copy and paste all of these. Watch the bottom of the screen here. As I press enter 12345 And we have our result five second later. You see here that even though these ones took a lot of less well, because we did promise that all it waited until all the promises were resolves and then logged out the values vehicle. And by the way, the reason that if I do this where I signed the variables first and then run promised at all the result is instant. And that is because we've already run these promises, right? We've assigned it to a variable. And between the time that we copied and pasted this in here, these promises in the background have been resolved. Right. Let's finish up with the final example that has some real world applications so that you have an idea of when we want to use promises and delete this refresh. Now I have here a list of Urals and these girls are from a simple AP. I let me show you called Jason Placeholder. And they just give us two men points that we could use, such as users that return us some Jason data. So I have users, posts and albums here, and this is very similar to something you do on a website where you want to grab some information, maybe from your server from the database with users, posts and helps. And let's say that they're all important to us for the page for the profile page of the user. How can we grab them all? Well, again, using promises we can just do promise that poll and we can just grab the girls. And in this case, we can just map over this So it's an array, and with each year l that we grab, we want Teoh, you want to fetch again? Web AP I to grab the girls making Ajax call to the girl does. Then we want to run the response through the response that Jason again, that just comes with fetch that you need to do. And then from here we can do a dot then and this is going to return us. Remember, Honore because we're getting a promise. All these fetches. It's going to return results. These results well, for now. Let's just console that Love them. We'll do results. The 1st 1 the 2nd 1 and the 3rd 1 Let's see if that works. I'm going to copy all of these. Let's go back to our page. Copy and paste, our code waiting a bit. And there you go. There's our response. We see that we got undefined here because I put three here instead of to Let's do that, we copy and Paste is again going to refresh the page. And there you go. We have our users, we have our posts. And then we also have our albums. Very cool. Let's say that something fails here. Maybe we misspell one of the You are else so the user's FBI won't work. Let's add a dot catch and console dialogue. Yeah, if I copy and paste this refresh and again run this through the console. Look at that. We get an air with promise that all if everything fails because we need users post and albums for our entire page on our website, we get a project from the promise and we can catch it and we can do whatever we want with this air of ankle, right? So let's fix that. So it's working again, and there you go. That's why promises are so beneficial. Were able to do something like this in a very clean way. Remember, the fetch simply returns a promise. If I just Ron fetch here, you see that I get a promise that's pending and by adding a dot. Then we are answering to whatever the promise returns with whether it's result of rejects and we get to manipulate the debt. So at their most basic promises are bid like event listeners except a promise. Can Onley succeed or fail once it cannot succeed or fail twice? And this is extremely useful for things that are asynchronous success and failure, such as AP Eichel's, because we're less interested in in the exact time something became available and more interested in reacting to the outcome. So we're reacting to something that happens a synchronously. So again, let's remember what we started with a promise is an object that may produce a single value sometime in the future, either resolved or rejected, with the reason why I was rejected and a promise may be in one of three possible states. It can be fulfilled, rejected or pending. See, that wasn't so bad, was it? Now go off and practice promises and see all their power. I'll see in the next one company. 2. Async Await: Ah, the new feature in jobs Skip that everyone is talking about lately. A sink await in this video. We're going to learn what all the hype is about. To get started, you must first know that a sink await is part of S eight and is built on top of promises. If you aren't sure where promises are, make sure you check out that video first. Now, underneath the hood and a sink function is a function that returns a promise. But the benefit of a sink a weight is that it makes code easier to read. Let me show you what I mean. This is a promise that we just made up. It's a move player function. Imagine we're designing a game and it has the distance plus the direction that the player moves. And if we want to change these, we have moved player dot Then move. Blair again Move player again. Move player again. Now this is a synchronous coat. We know that move players gonna happen then this is gonna happen in this than this. If we wanna have any sort of action within here, we can wrap it in brackets and consul lock at extractions. Oh, things that you can do with promises with a sink await. It would look something like this. What's going on here? The big benefit of a sinker weight is that it makes code easier to read, and I know you're probably not thinking that right now because this is new syntax. But just give it a chance. The gold with a sinker weight is to make code a look synchronous a code that's a synchronous look synchronous Now, if you'll remember, a promise in JavaScript is kind of like an IOU. I promise to return something to you in the future. Something like an Ajax call reciting an image, getting some information from a database, these air old things that take time instead of waiting around on them. We want to continue on with their lives and just have it. Let us know when it's done, but we're going to keep working on our own stuff while it's doing that in the background. We do it this way because that is how JavaScript works. If you remember in our how Javascript Works video, we talked about JavaScript being single threat for our programs to be efficient. We can use asynchronous programming to do these things. So promises help us slow this, and it looked like this. Now remember what I said at the beginning. A sink away code are just promises underneath the hood we call the syntactic sugar, something that still does the same thing but is just different syntax to make it look prettier. Syntactic sugar and promises have this dot then, that you keep having to change a sink. On the other hand, has this Easton quart in front of it, and some await keywords. So let's go through what all this means. Although these two things do the same with the player start function, we first declare a function as a sink. We let jealous script no hate. This is an chasing function, and we declare it with the words function and the function e. We now can do anything we want inside of this function, but we have access to a new world because we used the A sink word to define dysfunction. We have the await keyword and this keyword says, and we can remove this for now. This await keyword says, Hey, pause this function until I have something for you. so we're awaiting their response, and you can use this awake keyword in front of any function that returns a promise which we know that move Blair does. And once the promises resolved, then the function moves to the next line, and it awaits the next move and awaits the next move and awaits the next move. Now the cool thing about this is that instead of changing it like this, I can now assign just like a synchronous programming variable first to await this. And I can assign second to await this. And first and second will have the result off each function, but in a variable. So it looks very synchronous you're not using dot Then you're not chaining. You just have simple synchronous programming. You're waiting for this to happen, then waiting for this to happen. But let's use a more realistic example. So we really understand this. If we use our fest function and again, if you remember, fetch function, that's a promise. You see that we get a promise. So with fest function, if we use our favorite, a P I resource Jason Placeholder, let's grab be users here. So this users and point if we want to fetch something. We did return promise. So we would do a dot dan response. We would have to run it through Jason on and then finally dot Dan, console that blood, their response or the data that we get. So again, if I copy and paste this into our council, get a promise that's pending initially. Then it gets resolved and I get my users. Now, how can we turn this into a naysaying function again? The same feature. It'll work the same, but it will look a little bit cleaner. It will be syntactic sugar. Well, if you remember, we have to declare it function with a sink key word and this function will say Fetch users and fetch users. We'll have this inside of it, but we can now use in front of anything that returns a promise the await keyword. So now this function is gonna pause until we get a response from Fitch. So I can say const response equals Await the fetch call. And now, instead of using the dot, then I can say const data equals a weight response dot Jason because again response that Jason returns a promise I can put the await keyword and then finally again, just console dot log death. All right, let's copy and paste this and see if it works. All right Now I call the Fetch Users function, which is the a sink function. The end made a bit of an era here. There's no response that's brisk, short form response. There you go. Let's try that. I get So let's refresh that copy and paste around the fetch users function and look at that . We have our promise that got resolved. And we have our users nothing different from the promise. But now we have a nice step by step, synchronous looking code that says, Fetch this, get a response, then run it through the Jason Method and then console log debt. And you might be thinking to yourself, Is this actually prettier than what we had before? Let's remember what we had before. This is what we have before. This is what we have now, and some of you might argue that the first promise way looks better. And you know what? It's personal preference, and this is a simple example. So there are times where this actually looks a lot cleaner But I'm a big believer and doing what's easiest to read and understand for you and your teammates. Let's do one last example. Let's do something even more realistic. Let's say that we have a list of your else, and this time we have the users, the posts and albums from the Jason Placeholder AP yet, and we want to run through them all. If you remember in our promises video, we had something like this. Let's remove this so we can see it better. So we had something like this. We did promise that all we mapped through that you are else. We fest the girls and responded with the Jason. And then we returned the array and the array hat users post albums, and we also did a dot catch. So again, just to make sure that this works, want to copy this but it into our consul, and we see that we get our users posts and albums data, so that's working. Let's convert this into a nascent compunction. Well, let's start by doing a constant get data, and this will be in a sink function, and I want to point out that I did it This time with function expression instead of the way that we did it last time, which was a sing function and then the functioning. But I just want to show you both ways. All right? So how can we do a promise that all? Well, if you remember, we can now put the await keyword in front off any promise so we can put the awake keyword in front of promise that all So I can say that, const And this is a little e s six magic of de structuring. I can say users post and albums that we're going to receive is going to equal await, and then the promise that all which we already have. So let's just copy that. We're gonna coffee the promise at all and place it on here, all right? And now we can just consul log what we had. We can copy and paste right after we await all the promises. We'll have users posts if I can spell and then albums and instead of array because we've done it with the structuring. We can just say users post and problems. All right, so let's see if this works copy and baseness and run. Get data. Look at that. We got the exact same results. Vehicle. But there might be one thing that you noticed here that is in the promise way we have the doc catch. If any of these fail, we want to catch be Sarah's. How can we do that with hey sink? Await. Right now, we're not catching any of the stairs. Well, this is the part that not a lot of people are big fans off. But it is something that once you get used to is not too bad. Job script has something called tried catch blocks, and that is when sees the try. Word is just gonna automatically run whatever's inside of it. In our case, all of this block we wanted to run in a try block and then try comes with a catch block as well. So try cash block and within the catch. If anything fails within here, well, we can catch it in here so we can just do Consul dialogue hoops. So now let's say I misspelled one of the girls. It's ka Penis. The stride upped will have the new you. URLs let me clear that New York girls with the Miss Belt you are l for one of them, we're going to copy and paste that Get data and you'll see over here that we get a syntax hair. That is because one thing you have to remember with catch is that the catch receives on here and this area you can console log it if you want. So let's just console log and then try this again. This time we'll just call this one. Get Dad out. What? Perfect. Now if I clean this up a bit and do get data one with the tri cast clock, I get groups type era failed to fetch. So I get the cash block with the air, just like we did with promise dot all just using promises. And there you have it. That's it. Basic await, although intimidating at first because there is a bit of new syntax actually makes things quite nice and synchronous looking. We simply have a variable that we assigned the await promise to, and then the function pauses there until the promise returns. And then it continues on with consul logging and just have to remember the try catch blocks here to catch your heirs and that's it. You're now in a sink. Await master. You can use whichever one you prefer. Like I said at the end of the day, use promises or a sink await functions based on whichever one is simpler for you and your team. But hopefully, when you counter both of these, you're now a lot more comfortable. I'll see in the next one the way.