Promise async and await in javascript

promises resolve reject a sink evade yes we are gonna cover all of them and the video is not even gonna be that much longer the use case scenario that we have created up here is remarkable and that is why we are able to create and learn almost all of it so we saw what is the problem that we are facing in the last video with these you know those in Thrace and that this guy those is creating a problem and somehow I want that once the dose is all finished up whatever the call he is making to database Web API is or anything then I want my trace to execute so I need to learn how can I write that kind of JavaScript in order to do so I need to first and formost rewrite all of this into a much simpler because as we discussed in many of the earlier videos this console dot log is not very good you might want to return it because not every method actually logs the information it should return in the production environment log doesn't happen it just returns either an object string array or anything else so we're gonna code this up into a much better in production way so it looks nicer so come on to this new file which says zero line promises follow along with me it's gonna be very very quick so and we'll be doing the same thing so in fact we can borrow this one method and do all of it in fact we can borrow all of these three let's go ahead and try to edit that so instead of this we are gonna just remove this one and we are gonna simply say hey I just want to return this pretty nice and easy we don't need this one here so we're gonna remove this we already understand what the problem has don't need to go woohoo for that we're gonna simply say it returned and this is gonna return I am - there we go nice and easy same stuff still the set timeout is there and this is gonna simply say I want to return ok so this is the situation right now not a big change we have seen this already so many time now previously we were doing all of these three call like this which is not really my favorite one either so we want to create some variable that call these methods hold the value that's coming up back and then probably we want to do the console log so for that we are going to create a simple let's call this one as call me and called me he's gonna call like that there we go nice and easy and obviously somebody's gonna call this call me just like that no problem in this one now let's go ahead and create a few variables specifically three that can call these three methods so I'm gonna call this as simply Val one which is gonna call this uno just like that and whatever the value you know gives it back it's gonna just do a console.log for well one any problem so far I don't think so and if you're having still problem with these kinds of code probably defined the entire CDs one more time and we're gonna do these things a couple of times so we're gonna say copy paste paste this time this one is gonna be a Val - and this is gonna call those and this value should be printed out and this one is gonna be valid 3 which is gonna call trace and this one is gonna call well 3 now let's go ahead and see what is the situation of code right now if I go ahead and run this one this is 0 6 and 0 9 notice here again it says I am 1 undefined in iron 3 and this is moreover a classic case of how things are gonna happen in production you are using and you are assuming that this value is coming on an instant and you are printing that it says hey I don't know what you are printing it has never filled the value yet and then we are getting the 3 so this is more over a refined version of what we studied in the last one now let me show you something really really different so you're gonna hear this key word quite a lot and if I come on to this DOS it's not really a perfect way this is just for example purpose so bear with me at this one if I just go ahead and say that there is a keyword or sink that I can place now just notice what comes up in place of this undefined I come up here and says hey there is a promise involved which is not yet being fulfilled and this brings us to the next topic which is a sinks I'm going to move this a sink and all of this so there are three things involved in here first we have already seen this one promises not we haven't yet studied it but we just saw it and then there is a sink innovate so what happens many times you're gonna make a web request or we're gonna make an API request or maybe a database request that database requests to you it looks like hey that should fill up like instant but even when the databases are or even on the same network of AWS or any other hosting that you are using they take probably a millisecond or probably more to just get a connection and then getting it back so if you're gonna call it and treat it like a local variable you are always gonna get into trouble anything which is a resource maybe even if you are taking up some of the local storage or something then it's a good idea to have something written in an asynchronous manner that means we have to introduce a new topic here which is promises so what is a promise a promise is something which has two states either it is gonna be fulfilled or it is not gonna be fulfilled so it's something like a variable is saying to you hey I promise you that I'll bring something from the web in just a few minutes or probably it's saying hey I got failed I got nada for you so we can create promises just like this so promises is an event which is tentatively might be fulfilling up in the future or might be not but it's gonna give you the response back that hey I didn't got completed so just like we can create objects we can create arrays or we can create objects from our custom defined classes we can create similar things with the promises so how that works I'm gonna go ahead and copy this I'm gonna comment this one because I'm gonna rewrite this method so I'm just keeping this method for you safe so that you can have them in exercise files there we go so how do we write this first and foremost let's cut out this entire thing so there we go this is all got cut out now we're gonna first and formost say I want to return and notice just like we were creating these new object just like this we have done this in the past similar to this you can actually create a promise there we go just simple like that and there we go here is your new promise as I told you you can keep your promise or you can just disregard your promise so same thing happens here as well inside this call back there we go you either are gonna be resolving your promise or you are gonna get rejected from your promises resolved means everything got good and whatever you wanted to bring from the web is giving you a good response okay and then there is a reject as well that means hey something got wrong it's sick it's an error part it's almost like a try-catch and then we got some bad thing happen so how does it work both of them are actually a method resolve and reject so how does it work you can simply go ahead and say resolved and you can simply say I got that so it's gonna give a string back that says I got that but we want to simulate the environment where things are not happening is happening instantly they are happening after a few seconds so I'm gonna go ahead and say hey I still want to do this set timeout means after some three seconds I want to return this but you don't return it directly after that because there's already one returned keyword so what we do is we actually resolve this now so resolve and inside this resolved I'm gonna resolve it like this and it's not really compulsory that you pass on a string like this it can be object it can be array or any other data type that you are defining but the whole idea is now our promise is getting resolved now through this situation this is always gonna get resolved but there are libraries like Axios and all of that that we use which are defined that if you get a proper response from the web resolve it otherwise get reject we're gonna see the reject part as well but this is how we do it and definitely I'll talk a little bit more about the promises because it has a den and catch in those scenarios as well we are not talking about those then and catch scenario rather we are just trying to fix the problem which is in the hand so okay one problem solved that now we know about the promises and resolve but the problem still remains the same how we're gonna fix this method call here so there are a couple of new keywords that we can learn here one we have already seen which is a sink and a weight so whenever your making such call inside the method you have to make that method as synchronous so let's go ahead and do it if we go ahead and say this method is gonna be a synchronous okay that's it you just add a keyword and it becomes a synchronous right now just by adding a keyword our synchronous it's not gonna do anything nothing at all but all the values for which you are making a synchronous call and you are waiting for a few minutes there we can use another keyword which is going to be evade this await keyword is a symbol first and foremost we make the entire method as and synchronous there can be multiple of eight calls here but this await keywords say is that hey hey this is important what we are doing here is so until unless I'm doing entirely I'm finished doing entirely what this dose method is doing don't just leave me here so everybody is gonna be sitting in the queue will be waiting nothing will execute after that and then we are gonna do it let's go ahead and check it out whether we are able to resolve this problem or not so I go up here it says I am one waiting nobody's leaving then we get I am - and I am three so this is the classic example of promises a resolved reject and all of that now what happens if it doesn't get resolved what happens if it get rejects now that is where something interesting happens I'm gonna say this is now reject now notice here something strange is gonna happen again one I am one and it says nothing hand we got problem here now this is a big issue this is not just a small problem it says hey there is unhandled promise rejection warning that says I am - so all the we're getting the same I am - but it was not supposed to get like this instead whenever we are calling something like reject there should be an error but since we are throwing up I am - it's getting I am - so it's important that we don't reject it right now we actually resolve this promise everything goes nicely reject means I'm raising up an error so you should be concerned about that error either handle it nicely ergonomic or I'm gonna crash the program okay promise is not just that it promise has a little bit more to it but we're gonna understand these promises and all these up but later on I this is good enough as of now we were able to solve this one situation or one challenge that was in front of us and that's the best way of handling it later on I'm gonna show you in a dedicated video that what this promise is how we can read the documentation a bit of it and how we can handle both resolved as well as this reject okay quite a lot of information in just one video I know so that's it for this one and let's catch up in next one [Music]

Channel: Hitesh Choudhary

Views: 56,045

Keywords: Programming, LearnCodeOnline, javascript, javascript for beginners, javascript course, javascript tutorials, learn javascript, udemy, coursera, udacity, learn js online, javascript projects, js tutorials

Id: Gjbr21JLfgg

Length: 11min 39sec (699 seconds)

Published: Sun Sep 06 2020