YTread Logo
YTread Logo

Asynchronous JavaScript #4 - Promises

Jan 02, 2022
you know or something guys welcome to your fourth

asynchronous

javascript

tutorial and in this video we're going to talk about

javascript

promises

. too many

asynchronous

callbacks can lead to messy code and basically give you a big headache so now what I want to do is introduce JavaScript

promises

that help us organize these callbacks in a way that is much easier to keep, so what the hell is it? a promise, so a promise is just an object that represents an action that hasn't finished yet but will at some point in the future, it's essentially just a placeholder for the result of some kind of asynchronous operation like an HTTP request , so say example, we make a rushed TP request to get some data as soon as the asynchronous request is made, it returns a promise object immediately before the data is retrieved and it is returned to us now inside that ct promise object , we can register callbacks that will be executed when the request completes successfully, so promises are actually a fairly new feature that we can use via the latest edition of Emma script 6; however, there are quite a few promise libraries, such as queue, that implement it as well.
asynchronous javascript 4   promises
I'm only going to work with the native promise library, so what I'm going to do is use it just to show you that this isn't supported by a lot of Brad, well, not a lot, but mostly, erm, ie browsers. I'm using Google Chrome, which supports the new promise API in Edmund script 6, so I'm fine, but if you're going to go into production with them, I'd probably still use a promise library as a queue to make sure I have full compatibility. with the browser and you can find it on github and you can read about it here so I'll leave a link to this below if you want to check it out let's say I'm just going to use the native promise.
asynchronous javascript 4   promises

More Interesting Facts About,

asynchronous javascript 4 promises...

API that was introduced in Emma script 6, so let's make a simple promise :f The first thing you'll notice on this page here is this scary code, but don't pay too much attention to it, it's just a simple function called gets that takes a URL and will output and it's going to grab some data using an X httprequest object, ok, and we saw how to do it in one of the early tutorials, but don't worry, I'm going to go through all of this in a few minutes for now, what I want to do is create a variable and Conte is going to call this promise and I'm going to set this equal to this get function which will just exit and grab some data right and exit and grab the data that's in the data folder slash tweets dot JSON is fine so when we call this function what it does is it returns a promise to us you can see right there it returns a new promise so now it's a promise and it's returned immediately before this data is returned to us ok so I said a promise is a either t placeholder object where we can log our callbacks for success or failure so we can do that now in this promise we can say promise point and then show a callback function here that will take the data with all the data tweets and then in there we can do something with those tweets.
asynchronous javascript 4   promises
I'll just log them to the console so the console will log the tweets and if I refresh this now we're going to hopefully see these tweets right there that object is cool so what's going right when we set this up? variable promise equal to this get request is returning a new promise to us and that promise is a placeholder for something that's going to happen in the future and what's going to happen in the future is we're going to take this data and it's going to be returned to us right, like so that what we say is fine, once that promise is fulfilled, once the data is returned to us and everything is fine, we use the then method to say then I want you to do this function, which is I'm going to register the tweak s to the right of the console and we can also set up our error handle using the catch methods also a catch and we can just chain this to the end of the method then so we'll say catch and if there's an error we can pass through a callback function call with that error ok and we can log that to the console too so i could say console blagh the error is ok and if for example i write this wrong to put an e'en ex tra so save it and we go to see this error here not found and we get that getting error right there ok ok great now you might be thinking ok why is this so much better than just using callbacks regular because after all this is just a callback function well the real beauty of this is when we start doing multiple requests asynchronous because we can just chain them together so what you could do in this first callback function is to return another promise.
asynchronous javascript 4   promises
It could return another request like that. and then inside the what I'm going to do is save the data with a forward slash folks JSON so as soon as this promise is fulfilled and let's trigger this method and the callback function right here once I'm done , we'll load those tweets into the console and then we'll return another promise which is a get request for friends Jason or right here ok so we're returning that and so now it's a promise for this it's ok it makes sense so now we can use dot again and inside of that we can do our other callback function and we can pass through the friends and inside of that callback function we can say console dot log friends if we can spell it right i mean there we go good so if we save that now we go to see both logs in console first settings then friends and again if we want to get more data we can We're going to say return and then get this time, we're going to say forward data, Jason slash videos and that's going to return. to us another promise so we can use do Then once we have that data we can go through another callback function like this and go through the videos and in this callback function we can log them into the console so if we hit save we get all three and this looks so much nicer than all those nested callbacks and different functions.
This is a much more elegant way of dealing with DOS callbacks. I think when we create this promise variable and set it equal to this get request here, which is this one right here we know that it's returning a promise, that's fine and anything with that promise interface has the dot then method available and the dot method catch available so we can do all of this because a promise is returned to this variable so I just want to go over what we're doing here and how we're returning this price so this function gets a URL which is just the information that we want to collect there and then what we're doing is returning a new t promise object right there and this promise takes a function and in this function there are two parameters resolve and reject so resolve is what happens when the promise resolves when it's a success if you like and reject is what happens when the promise is rejected and it's an error if you like it's ok so inside this promise what we are doing in pri First of all you've seen it in previous tutorials we've created a variable called X hate TTP and we're setting that equal to a new xmlhttprequest so we're using the open method where we say we want to make a get request to the provided url that was passed to this function and we say true for async at that point what we're doing is we're saying down here we want to send that but here we have these two methods on load and on error and basically if your browser supports the promise interface then will support this method not this method sorry this download method and this error method too so you don't have to worry about t hat in the onreadystatechange state string stuff ok so what we can say is that the points are unloaded when this data has been loaded, we set that equal to a function, we're going to check that the status is equal to 200, make sure it's found, and then we're going to resolve that data by passing it first and getting the response from the H in the correct output ttp object so we will call the resolve method when it succeeds if it is not equal to 200 then we will call reject and we are passing through the status text of this object too ok so resolve the promise or reject the promise based on success if you want that ok down here we are saying by error if it can't be loaded by any other reason then we'll also reject it and we'll also pass that HTTP status text X dot X ok so we reject it here and we reject it here based on these conditions and we're resolving here if everything is ok ok so when let's have this r figured out then the dot then method can be applied and we can access that data when we have the reject function right there then the dot catch method is applied and we get the error right there that's how we do It's a promise and that's how we use the promise interface if you want now jQuery also comes with a promise interface these days so I'll quickly show you how we deal with promises like that as well because it abstracts away all this kind of stuff if you like if I just wanted to show you this so you have some kind of background knowledge and understand what the inner workings are like, but if we talk about all this crap for a minute, then what I'm going to say do is show you the jQuery way so we can use jQuery to go and get some data that we already know and then here we're going to say what data we want for the latest data bar forward tweets JSON yes and then instead of going through a function callback here like normally dash we can say period so because this now returns us the promise interface and anything with the promise interface can use the dotnet method so we can use the dot method on So in this and we can put our callback function here and we can step through the tweets and then here we can log to the console those tweets which, like we did in the other example, so if we refresh we'll see those settings logged in the console and again we can return the same thing this promise interface can return so we can call the next method again so I'm going to copy that and I'm going to say return and I'm going to do another one of those this time your friends dot JSON and what What I'm going to do is say next because this has come back as a promise to this right so now we have another promise that we can call point next no sorry no up next to keep mixing them up for some reason so it's okay if we can spell it out and then inside this top 10 method we can pass t through our second callback which will take those friends and inside that function we can console. register those friends and we can see them here now ok and finally we can return another promise which will be the videos and then we can use another dot and then the method shows our callback function inside with those videos and inside that function we can register them in the console like this and voila bob is your uncle we have all three of us logged into the console right there he tweets friends and videos so if you compare this to the callback method we used in the last tutorial where the whole program is we had callback etc this looks so much nicer it abstracts a lot of this stuff in the first place and also looks neater and looks like synchronous code one after another if you like butter yeah that's the interface of the promise and that's why it's so good it looks so much better and is so much easier to maintain so any questions feel free to leave a comment below.
Otherwise guys, I'll see you in the next tutorial where I'll talk about generators.

If you have any copyright issue, please Contact