Asynchronous JavaScript Tutorial #7 - Promises

Key Takeaways

okay then so we've seen now how to request data from different sources one after another sequentially so we get the first to do's then we get the second then we get the third and we did that by nesting the requests inside callback functions inside callback functions inside callback functions etc and if this carried on in this pattern for much longer this would get quite messy unmaintainable and it's just not a good idea so it would be nice if there was an alternative way to do this in javascript and there is using something called promises so what i'm going to do is explain the whole concept of promises first using a simple example then we're going to take what we learn and apply it to this example right here where we make this network request so first of all let me get rid of all this junk we don't need that anymore and then i'm going to say promise example first of all so i'm going to make a new constant and i'm going to call this get something and this is going to be equal to a function and inside that function ultimately would be some kind of network request much like up here we have get to do's and inside is some kind of network request so we're going to do something in here like get data but when we use promises the first thing we do is return a new promise like so now a promise is basically something which is going to take some time to do so a promise is ultimately going to lead to one of two outcomes either a promise is going to be resolved meaning we get the data we want and it's resolved or it's going to be rejected meaning we get an error at some point and we reject the promise so there's the two outcomes of a promise now this promise takes as a parameter a function so let me pass through an arrow function right here and inside this function this is where we typically do the network request we maybe fetch some data so let's just say fetch something now we're not going to do that because i'm just doing a simple example so i'm not going to do a whole network request again down here but imagine we did now i just said inside a promise we do one of two things we either resolve it when we get the data when it's a success or we reject it when we get some kind of error now that's very much like up here we either get some kind of success in this case or some kind of error down here so in a promise we automatically get access to two parameters inside this function and that is a resolve parameter and a reject parameter now these two are functions and they are built into the promis api i've not just made these up they're built into the promise api in javascript and we automatically receive these as parameters in this function so in here we typically fetch some data make a network request and then if we get some kind of data back and it's a success we'd call the resolve function and we'd pass the data through in here now we're not making a request and we don't have any data so i'm just going to do this by passing a string and saying some data so really that would be our data but we're resolving with some dummy data which is just a string now if there's an error instead we'd call reject and we'd pass the error through but again we don't have an error because we've not made this request so i'm going to just say some error instead and that's all there is to it now what i'm going to do is test these out one at a time because typically what we do is some kind of if check to see if there is a success and then if that's true then we'd resolve if not then we'd reject so i'm going to do one of these at a time so let me comment out the first one and imagine now when we call getsomething we return this new promise and this is a success we fetch the data it's fine and ultimately we resolve with some data so now if i come down here and call get something like this then this right here this will return a new promise ultimately and inside that promise it's either going to resolve or reject so we returned a promise right here and a promise is basically saying look i am going to do something at some point i'm either going to resolve or reject at some point now when we get a promise back from a function like this we can tack on a dot then method and a promise is basically saying okay well if you pass a function in here then i will fire that function when we resolve the promise so if i pass a function through here now like this i can take the data that is passed to me when we resolve so when we resolve something in a promise it fires the callback function inside the then method and that callback function takes the data that we passed through to the resolve function so down here i could say console.log the data that we get back which is just going to be this thing right here some data so let me save this now and we should see this in the console and we do some data okay so that's if we resolve a promise now if we reject a promise we also get a second callback function as a second argument inside this then method so i could do now another callback function and this callback function would only fire if we reject so the first callback function inside the then method fires if we resolve the second one fires if we reject and again we get access to the error in here which is going to be this in this case so i could say console.log the error so now if i save this because we're rejecting the promise when we reject it's gonna look at this then method and fire the second callback function inside it so let me save it and now we get some error so this is promises in action we either resolve something or reject something and then fire one of two functions depending on that now sometimes when we're adding two functions as arguments into the then method it can get a little bit confusing and look a bit messy so i'm gonna show you a slightly different way we can write this i'm going to say get something again again we tack on the dot then method and again i'm going to pass through a function as the first argument of the only argument in this case and this will fire when we have a resolve so again i'm going to take in the data and because there's only one parameter we can delete those parentheses we could have done that up here as well and then inside i'm going to console.log the data now that instead of having a second function right here for the reject case instead what we can do is tack on another method called catch and what this does is catch an error so this works the same way i'm going to place error here and do another function inside the catch method and i'm going to say console.log and then pass through the error so instead now what happens when we get a resolve the then method fires and fires the callback function for that resolve right there and now if we get a reject with an error instead it comes to the catch method to catch that error and then it fires this function right here and this sometimes looks a bit neater than this especially when it comes to chaining promises together which we'll see in the next video but anyway this is going to work the same way if i save currently we get some error and if i comment that out and this time resolve then i'm going to get this right here we get the data some data so that is the basics of promises but it might seem pointless before we actually do something proper with it because this is just a dummy example so instead what i'm going to do is come up here and return a promise inside get to do's so i'm going to come up here and i'm going to say return new promise and inside this promise remember that is where we fire a function which is going to go out and do this network request and now that is all of this stuff right here so let me cut that and come up here and i'm going to paste all of that back in let me just scoot this up so now we're returning a promise and this promise is now doing all of this stuff so remember inside this function we take the resolve function and also the reject function and we have to call either one of these dependent on the state of our request so instead of now calling a callback which we don't need to pass in anymore we'll take that off instead we're going to either resolve or reject so i'm going to resolve here because that's a success case and i'm going to pass through the data right here now in this case i'm going to reject and i'm going to pass through some kind of error which is error getting resource now then if i call this function get to do's down here let me do that i'll say get to do's and what i'm going to do is just pass in first of all the resource which is going to be luigi so i'll say to do's folder forward slash luigi.json now we don't need a second parameter anymore because we don't need a callback now instead what we do is we tack on a dot then method because this is now returning a promise and when something returns a promise we can tack on the dot then method which takes in a function that function is gonna fire with the data we get back when there is a resolve case now i'm gonna delete these parentheses because there's only one parameter right there and inside here all i'm gonna do is console.log and i'm gonna say promise resolved and then i'm gonna output also the data that i get back now we could add a second function here which is gonna run if we reject the promise but instead i like to use dot then and then inside here we pass a function and that function is gonna take the error that we receive back and then all we'll do is console.log promise rejected and then the error okay so let me give this a whirl and in fact let's delete those parentheses again give this a whirl and that is all going to work so if i save this now we can see the promise is resolved right here and we still get this promise rejected so let's see what's going on and it's because silly we've used then again this should be catch obviously so we're catching the error here we have the then method then the catch so now if we save it we can see only promise resolved so we get that data it's all successful if now i change this to something like luigi's which doesn't exist save that now we get promise rejected error getting the resource so this is another way other than using callbacks to work with asynchronous code and this is really going to come in handy when we try to sequentially get data one after another because we're going to be able to chain promises together so we've already seen how we can nest callbacks to do this and this resulted in messy unmaintainable code so we're going to look at how promises can do the same thing in a much better way in the next lecture