Asynchronous JavaScript with Dylan Israel | Dylan Israel | Skillshare

Asynchronous JavaScript with Dylan Israel

Dylan Israel, Software Engineer, YouTuber, and Author

Asynchronous JavaScript with Dylan Israel

Dylan Israel, Software Engineer, YouTuber, and Author

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (34m)
    • 1. Meet Your Instructor

      1:27
    • 2. Setup

      1:59
    • 3. Sync vs Async

      2:06
    • 4. Promises - Resolve & Reject

      4:00
    • 5. Promise.race()

      2:14
    • 6. Promise.all()

      2:03
    • 7. Fetch - JSON

      3:23
    • 8. Async / Await

      4:30
    • 9. Try, Catch, & Finally

      4:14
    • 10. Fetch - Options

      5:23
    • 11. Solo Project

      2:39
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

119

Students

--

Projects

About This Class

8de6cd7b

In this course we will cover all aspects of Asynchronous JavaScript.

Not only will we go over there technical aspects, but how you might use them in the field. 

We will cover:

  • Synchronous vs Asynchronous Code
  • Promise resolve()
  • Promise reject()
  • Promise.race()
  • Promise.all()
  • fetch() & json()
  • async & await
  • try, catch, & finally

Meet Your Teacher

Teacher Profile Image

Dylan Israel

Software Engineer, YouTuber, and Author

Teacher

Hi, I'm Dylan. I am a software engineer by day and a YouTuber by night. I also build courses on Udemy as a hobby and am currently working on a book.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Meet Your Instructor: you guys, I'd like to introduce myself. My name is Dylan. Israel always thinks that it's important for you to sort of meet your instructor and know a little bit of their qualifications. So a little bit about me, I'm a self taught developer. I'm had four software jobs. Now, I've been in ministry about four years, um, jumping around a little bit, learning lots of different things, but especially has been front and development. So I've been working in various frameworks Angular view, Jake, Or if you don't count that react, um, you know, worked another at one such as Ionic. But job script is really my bread and butter of any application. I've worked with a little sort of personal standards. I've got on my way to do several certificates. I've released several courses on you. Demi have released several courses on Scramble. I have a YouTube channel with over 900 videos regarding stuff, and I have some content out there another platforms as well. So it's a little bit about me. I hope you look forward to this. This sort of many course going over everything you need to know about asynchronous JavaScript room recovering promises all static methods that go with it, how to handle them, how have handled air areas with them. We're also going to talk about a sink and a weight and really dive into it so that you can make sure that you're able to do your job at the end of day. Make sure that you can build websites that are connecting to AP eyes and how you're gonna handle that. And you know, by the end of this course, you should be able to build a basic run application. That's really our goal here. 2. Setup: all right, a little bit of synchronous set up and just their introduction. Does some of the tools will be using throughout this course for the our Tech Center of choice, I will be using visual studio code. Visual Studio code is a free, open source from Tech Center. She's lost the words for Web development, and you go to code dot visual studio dot com and download and install it. It's ah, great. It's really just fantastic. I've tried a bunch of textures on dumb. This is the one that I've been sticking with for quite some time now. Another tool that we're gonna be using is Jason placeholder dot type e code dot com. Now what this is is a a free fake rest a p I M p eyes. They're the most common thing that you're going to be dealing with when talking about asynchronous code, and instead of us having to spin up our own back end and what not we have this nice little a bunch of wrestle AP, I said we can consume thanks to Jason placeholder dot type dot com, and you can see we have a bunch of different sort of route so we can hit and we're gonna dive deeper into that later on. Now what's you have? Visual studio code installed and you're ready to go. If that's your Texas choice, would all be using for the course is an extension called Live Server. Now what life service going to do? So going? Take this shallow sort of hte email document that's really just there to inject our app dot Js and it's going to launch a server on that page, and that's going to allow us to have our our job script dynamically update. Really, we're just gonna be looking at the consul and seeing how to get data I want to do with it and and how we can manage our asynchronous code. But I think it's all it's much better whenever we can actually see that print out, said a theory. But life sort. It will be the extension that I music so that we got that out of the way. Let's go ahead and jump into a couple examples 3. Sync vs Async: So before we dive too heavy into, like, promises and actually synchronous go, let's just give a basic example off secret disco verse. Asynchronous coat. So say we have a couple of consul locks here and it's just gonna put three or four. And this would go one. This has got to do this. We're through. This would go for this is an example of secret. This coat you'll see that it prints out in order. 123 and four Right to goes Here, This line, this line, this line, this line so pretty basic example. But, um, let's say we had a set time out. Now set time out is an example off of how you might handle asynchronous code. Where in here we're going, Teoh, give a value that's going toe, delay it by one second or 1000 milliseconds and then in here just go ahead. So it's an order. Put a consul. I got four and then right below it, Council on fire. But now when we save it, you'll see you see that delay? There it print out. 123 then five. Then for let's make it a little bit longer and you can see that. So about three seconds goes by after it loads. And for so what's happening there is. It's not even though the code is in order, these air dealing with its synchronous things, meaning they're happening in order instantaneously. And then this is a synchronous meaning is going to happen at a later date. Now is a fairly out of the box example. But you know, more than more often than not, you'll be dealing with asynchronous code when dealing with a P I calls and getting data and connecting to third party applications. And sometimes we need this to actually be in the proper order. And so we need to make sure we're able to handle are asynchronous code so that it performs the way that we needed to. And in Java script, we have what is called a promise to help us do that, and that's what we're gonna talk about next 4. Promises - Resolve & Reject: All right. So promises give us the ability to deal with asynchronous code. Oftentimes will be ap eyes. But sometimes you may have, like, user interactions. And you want to wait for some something to happen. And you might generically create a promise of your own instead of receiving a promise like you would from a P I. So how much do that? Well, listen, we have this promise on, uh, you'll see we're going to use a constructor and create a new promise Now are new. Promise takes in a function here, and what it's gonna have in our function is two things is gonna have a resolve value, which is going to allow us to send the successful value back. And it's going to have a reject value which will allow us to send a rejected value back. So you'll see way haven't like so. And you could see this gets kind of, ah, large kind of quickly. And there's a waste to clean this up, right? So, like, maybe we would do something like this. And then we throw an arrow function in here and just eliminated a little bit of that. So let's say we had this if true, right? We don't really. Obviously, you never would have true statement. Maybe like this, But you could have if true, do this else do this. And you might be saying, Okay, well, if it's true what I wanted to do, Well, when it resolves right here, we wanted to return, you know, probably some data, but we'll just say, successful else we wanted to reject in this case, we can return here. So in this case, we're never actually gonna reach this because of how we have this set up. But, uh, let's just let's just roll with it for a little bit and so cool. That makes sense. Um, we're not doing anything with this data quite yet, right? Well, we can easily get the data using the then. So when dealing with promises, you need to then get the data out of the promise, right? Because it's it's not in a sort of a data type form. It's in a promise form, meaning that it's asynchronous. And now we want to get the synchronous value if you want, think of it that way. And so then we'll get the successful callback value back. So let's say we just call this data, and here we'll just go ahead and consul dot log data. So what we should get is successful. Excellent. Um, now, what's gonna happen here? So if we go, if false, you'll see uncaught in Promise Air. Now, what this is basically saying is that this reject is something with bad, right? The server didn't return. Something gives the 500 level air. When we're expecting an array of data, Something blew up. Now we have this nice catch property here, which is going to catch that air. And so, in our example here, we can go ahead and council that log. Here, you see, we get it back and we did something with it, right? You know what? This is typically how your promises air going to look in on sort of ah, or fundamental level. I typically like to go on different just like everyone has their own sound. I actually use promises this way. I'll show you cleaner way later on in the course. But that is the sort of Ines an ounce of promises of using you passengers all function you passenger reject function and you do something with it. right, it's a uh it's one of the more. It may look a little strange at first, but it gives us the ability to handle a synchronous code in a very clean manner. Now, oftentimes, you're not going to be doing this. So let's go ahead and hook up in a P I because there is an additional step a lot of times when we're getting data from a P I we haven't talked about yet. 5. Promise.race(): our guy. So what we have here are two promises one set to resolve with the value of one and a set time out toe, you know, make feel like synchronous. And that takes approximately 50 milliseconds, not approximately 50 milliseconds and a 2nd 1 that's going Teoh too. Yes, and take 100 milliseconds. Now promises have a static method. Again, a static method is meaning that we don't have to. Stan, she ate a class to use it. Or we could just use the promise method directly on its prototype in this case. And, um Well, what we can do is we can use the promise race. Say there's a situation where maybe a user has to make two different choices and their asynchronous and you wanted to Onley handle for one like so promised, not race. What that allows us to do is going to return. A promise is gonna take in an array of promises in this case process one promised you could taking this money as you want, and it's going to resolve the very 1st 1 So the 1st 1 to complete and this might be hit two different AP eyes. They're going to give similar values, whatever the case may be. So in our case, we're going to use promised on race and in here as I mentioned, you're gonna It's, uh, parameters are going to be promised one and promised to, So it's gonna take in an array of values. Now what this returns is a promise. So we're intruded like anything else, right? So in our then here we can have our data. And now if we go ahead and so long data well, you see is we get one here. The reason for it is because they results first. It doesn't resolve it, these will result, but it's only going to return this value. So in this case, we made this 500 milliseconds. You'll see now that we're going to get to, it's going to resolve the very 1st 1 that's promised on race at the end. A. I haven't really had a instance to use it, but I think it's worth mentioning. You know, it's pretty, pretty straightforward. It's going to resolve the one that returns back first 6. Promise.all(): and the great static method that I actually used quite frequently. It's promised subtle. So process all allows us to resolve all the an array of promises that were passing into it . And then we could do something with those values. And it's a little situations where say you have maybe three or four AP Isa sort of chained together, but they don't really route. You don't really necessarily want Teoh. They don't chained together like before where we would have a sink away and we would wait for one value than dually these air, all asynchronous things that can fire off it at once. And then when they're all done, we can then do something. They don't necessarily directly relate to each other. But we need all four to resolve or, in this case, all three so we can use the static method problem at all. And again, it's just a promise. So you'll see here it takes in an array of promises, also promised one from's, too, and Promise three in this case is gonna print 123 And I changed the speeds here, so you'll see we have 500 milliseconds, so it's going to go even though we're fascinated, promise one promise you pro Surrey. It's going to return them in a value that makes sense, not necessarily going to have the data come back in a strange order where promised ones value will be index zero and promised to be indexed warm and so on. So forth. Right, So here we will consulate log out our data, and then we get 123 Even though three here is the fastest, it's because that we've put it in the third spot. That way we know how we're going to result. So that's promised at all. It's essentially waiting for all of them to resolve, and you can see here. If we may be made this five seconds, it's going to wait the full five seconds, even though these other to have resolved because it's way for all of them to resolve. Hence the promise. Settle 7. Fetch - JSON: All right. So we give you an example of promises from a non server from from not a server, but more often than not 99 time. You're gonna be fetching data from a server. And how do you do that? Use that word fetch. You may have seen this, but fetch here. Also. You'll see it returns a promise. And so now we understand sort of the core fundamentals of promise where it's going to either return. It's going to resolve a successful value, rejected a current value or still be pending, meaning that neither situations happened. I don't think I mentioned that, but that's not like a call back method that we're gonna be calling, so you'll see here that we have fetch, which is going to allow us to enter your URL. In our case, we're gonna be using the type B code post you are l, which is going to go and get us in a ray of data. So this is gonna tell it where to go look for the data and then we're going to use those same values we used earlier. However, it's gonna be slightly different because because we're coming from an asynchronous location where the data isn't necessarily already a Java script object. Our response that we're going to get back is I'm gonna need to be transformed. You'll see it in a 2nd 1 So, like, if I was Consul, that log the response directly? What we're gonna get is this very sort of large thing here. Bunch of data readable stream, right? We don't actually get the date. You're like, Dylan. What am I gonna do with this? Often times not very much. Eso What you'll probably will probably end up happening is as you go and learn more advanced topics like interceptors. You might actually build this next step completely into you're Interceptor and not have to do that. That's that's a way events topic for what we're talking about right now. So what we're going to do here instead, we're just gonna return that response. We're in college, a song on it, which also returns a promise of type any so meaning that it can be in any order. But what this is saying is, take the data that's coming back and put it into a value that we understand. Like Jason converted into a job script object And because promises can be chained, meaning that you can have multiple promises in order. What you can do here is we can now finally get our Jason or our data, like before. And now we counsel that log response. But excuse me, just Jason. We'll get our data exactly as we expected. Now we get this very large data set. Um, of objects, right? We're just a mock data, right when I really care what the data is, but you can see that we're getting the data. So when dealing with sort of a p eyes where it's it's not going to be storing it as, ah, Jason, we have to actually convert it, convert that promise, which returns another promise. But because we can change our promises. Meaning once it returns this value, then do this. We get our data in a javascript object that we know how to work with 8. Async / Await: now a sink away Our great keywords that we haven't really talked too much about, and they clean up a lot of this nesting. So you'll see something like this, and it's it doesn't it's nesting is sort of one, those bad things in code where it now thinks it very convoluted. It's sort of hard to read and doesn't really lend itself to clean code. So how might we rewrite this with our A sink? Await key words? Well, pretty straightforward. So let's say we you write a function here. I'll just say that this is got get post like that all we have to do to enable they sink away Cuba. It's really put a sink in front of this function, and now we have ability to await data. Now, what that's going to do is within its block, scoped here. So within our block here, it's going to await the data. And so in our case, let's say we have constant will call this response Well said this equal to fetch and in our fetch will pass in the same values here, but we're gonna hit the same endpoint now. At this point, it's not. It's just going to copy that out Post. You know, we're not really gonna do anything with this, right? This is if we're going to console, log it, you'll see weekly again. Just get a bunch of mumbo jumbo stuff about, you know, some sort of promise. And it's pending, right? It hasn't been resolved. And so that's what we need to deal with. And so now, now it is. But when we got is so how can we How can we handle that? Well, we can use the await keyword. The reason one that we need to wait. It is because it's a a sacred dysfunction. We eventually need to convert this response. We actually need to convert it to Jason. So you'll see here that we got the object as we would have, uh, remember when the consul like this out. But now we need to convert it to Jason. Who could do that relatively easily, Uh, by awaiting the response in calling dot Jason on it. So now when we do this and we constant all along response. Excuse me, Jason. You'll see we get our data and we've awaited this asynchronous task. Now this leads us to a couple issues and we're going to solve those in in the next video. But we have the ability to eliminate all this nested chaining while still chaining asynchronous actions promises. So one promise to promise, right? We're just changing it together, and we're awaiting them and storing them in variables and things like that. And now we can treat our code in here like the synchronous tasks like asynchronous ask, which is only it only really cares. And it's sort of bubble. Now if we were to, like, do something on this console council, that log to log one did something like that. You'll see we get 12 and then this because this is a synchronous. But keep this in mind is that you can actually await functions as well. So we say, Hey, wait, this this is promising. Oh, it's because we're not in a We're not in a component class, but you can await returns of things as well. So say this returns a promise of our case on. We do stuff with it, but I'll get into that in later section, but you'll notice that it's still going to be treated a synchronously. Where goes 12 Because there's a synchronous It's only treating its secret hisley in here. Right? So we console dialogue free right here. We're going to get three every day of the week. In between, these values always gonna go first. And we Consul. Oh, I long for after the fact because we're already treating this in a synchronous fashion and so we're now treating are asynchronous code synchronously. That's the point we're trying to get across. 9. Try, Catch, & Finally: So one issue with dealing with this is we're not accounting for when there are heirs and weaken. Do you do that repeatedly, easily using a try catch. So try is gonna be where we're going to put our logic that we're expecting to succeed, but may not. And catch is similar to our catcher earlier. We're going to, uh, catch the air. And so this e here will be our air value. That's return. So let's say in our example right now, everything's going to work just fine. Right where? Council walk out data, we get the data. And then here were in the council of Log Out the Air. There's no air right now, says no areas getting consul locked out. Let's say we modified this so relatively ugly you'll see that we can. We get our hair and everything. You know, we're having issues here, but it's if instead of maybe we'd get in here this way, where instead of changing the your l, we go, we say, uh, response saw Jason on. I thought map and then we just return about right. We returned the data, so just pass it. So we have our item in here return the item. And instead of hitting a array of values, let's go to our Jason placeholder and get a get a single value. So we haven't really does too much into it. But you can see here we can get an object here if we map on the object because it's not an array will get a little bit of an issue, so as you would expect, and so you'll see here. Response. Jason dot map is not a function, and typically you was log in here something like that, but, uh, this so you can catch those heirs. Now we'll put that back just for demo purposes, but you can wrap this with a try. Catch. One thing we didn't talk about earlier was finally, there's actually a finally as well. So finally, is hey, after our code here after our try results after our catch results, this is what we want. Dio log always rooms, so maybe you have some cleanup process that you need to have always always find this troop , but always runs it Zlata was going for, but maybe have some cleanup process that needs to occur after you get your code. Whether it's successful or not, and that's what finally is for. And it's it's worth mentioning that you could do that in your job script promises as well. So if we were to just call it this out real quick and we're, uh, do all this sort of same stuff where we had a fetch and then we fetch, starve it data together, then wait another then because now we have Teoh handle the data. And then we had a finally, what You could do something that is all right now. So we fetch on our post, and this kind of gives you an idea. In my opinion, why I consider this to be much cleaner is less nasty and list less, maybe chaining and more, something that feels like what you would expect, do it. And even with serve the s six era functions that it does still become a little bit a little bit wonky, I guess in this case will just return the base on anything and finally, and you'll see we have always since so you have this with your chains as well, and you're gonna typically want to end that you want to have your finally it's the last one that makes the most sense, right 10. Fetch - Options: so far, we've shown you how to get data from an A P. I using the fetch, um, function. Now what? We're going to show us how you're gonna do those additional calls. Those push their existing those posts. Those puts those deletes those patches, and we're going to use post as an example here. You know, depending on the A p I, you may or may not get back a response. When you do a put or a post in our example, we will. We'll get back a response. So let's give a basic example using the A sink await key words that were doing before. So we have our const. Response. Now, this is gonna be equal to the fetch, and we're gonna pass in a euro a little bit. Too much of the Europe will a little bit too much, period. So the earl will be in our example, keep words going all over the place. Uh, Jason places holders not type ago. Now, the main difference here, other than we have to throw in a weight on here, is what we want to do is actually a penda Siris of options on here. Critical. So what that's gonna be is the way. By default, we're gonna arm if it's gonna be a gig. But we wanted to actually be a post in this case, so we're gonna change the method with the option here. The next thing we have is a body, and we're gonna leave it as an object. Well, let's say we have some. You know, we have, like, first names that Dylan and then we'll have last name and we'll set it to Israel like that. And way have. It's I guess we're dealing with the block post titled We'll Just Do My Blood. But this isn't actually gonna work. We'll talk a little bit about why in just a second and then you also can have very stutters assigned here when it really dive into headers too much. But a common header that you might see is going to be something like this content dash type , and you can put in a couple different values. Sort of a standard would be something like application, uh, slash Jason on, And then you might do chart semi cold here, just like charged set equals to utf there's a whole bunch of stuff that might be a simple example of Heidi consigned headers, and this is pretty much it. Now, what's gonna happen here is we would continue on going through and converting our response and whatnot, but, uh, issue we're gonna have It's right here in this body, you know. Remember how we when we would get the data, it would come back and we have to We'd have to first go and convert it to Jason. Here is sort of the reverse where the a p I doesn't understand a job script objects that we have to send it to him is Jason, and that's relatively easily, easily done, but something that you just need to be aware of. And we could just use to j phone Jason String if I method, and that's just going to turn all this into a string, right? So if we were a copy this and put it in the council directly, you'll see that what we get is just a stratified object of what we're passing into our body here. So now that we've done that, it's going to save it. What we could do is take our response and we can convert the So now that response is actually firing off. And if we go the network, you we should see. We should see here. Uh, but now that we've done that, let's take our response. And we want to get the Jason on the backs of concentrates on is equal to our We're gonna wait it again. Response, Jason. So save it. And once we have that, we can just go ahead and consul long out Jason Value. It's actually, uh, preserve. Lock yourself for you. Refreshed firing off our council. What did we do wrong here? I messed something up along the way Here. Let's see the good old classic you forgot to call your function was why we weren't seeing it. So let's go ahead and at our post here and you'll see now when we say that we get this and not only that, but it actually returns a unique I. D. Right. Oftentimes, when you're doing a post, you need to get a unique i d associate ID with it. And so this returns of That's just how the FBI works. But this is how we're able to do multiple types off asynchronous calls whether we need to get the data. Update it. Delete it, Create new data. This is how but and how we assign options using the fetch a p A. 11. Solo Project: so our project's gonna be won without any hand holding, and sort of the reason for it is I think it's really gonna make these topics of sort of asynchronous calls and being able to manipulate data just created basic front application stick. That's always been my thing. And I think in this case it's a simple enough application that you could do it on your own . And this way, if you don't know, you know, whatever framework I'm working in, whether it be reacting angular view, you have to go pick it up. You get sort of just work through it on your own. So what we're gonna be what you're gonna be building here is a crowd application. Now, if you've never heard of crowd, it stands for create, read, update delete. It's a basic back office tool for any application you working. It's gonna be especially important. They at least comfortable with the general flow here because no matter what type of application you're working on, you're typically as a junior level developer, usually going to be building some back office tool for the business as you start to get your feet wet and build something very similar to this. So, you know, a standard crowd Apple have sort of Ah, in this case, we're dealing with the user data and just give you an idea here. I'm just basing it off of the Jason Placeholder, That type e code slash users section here. Now, with that being said, you're going to have access. You're going to use that a p i for this project, and it's it's free. It's open source, consecrated, counter anything. And what's gonna like you to do here is your first you're going to get it, get all on display in a table form. You're also going to have a delete and an edit icon. Ray, I forgot about that, and I come, but you could just say if you click anywhere in this road road is gonna take you to the to the put state put page or edit page where all these fields are going to be pre populated. Then you save its going to send off the A sink called updating the data and then a post doing something very similar. Except this is gonna create new data and of course, the delete here. So we get our full crowd functionality. This is the project at the end. The day I just had some random stuff here. If you want to make it a little bit nicer, use whatever sees us frameworks you want. Use whatever job script frameworks you want, but make sure you create the full crowd application. This will be something that I've always think is a great portfolio project because it's almost identical to any back office Children would be building. Doesn't matter what it is. In this case, it's users, but maybe for your business. It's items, and it's just how you manage the item detail tales for your e commerce platform. It all just sort of depends, So enjoy, have fun and good luck.