Transcript

          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.

ET cetera.

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 Promise 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 get something, 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're 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 pass through to the resolve function.

So down here I could say console, dot, 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 dot log the error.

So now if I save this because we're rejecting the promise when we reject, it's going to look at this

then method and fire out 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 going to 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 or 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 dot log the data.

Now then 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,

dot 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, depending 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 todos down here, let me do that.

I'll say get todos.

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 Todos folder forward slash Luigi dot 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 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 going to fire with the data we get back when there is a resolve case.

Now I'm going to delete these parentheses because there's only one parameter right there.

And inside here, all I'm going to do is console dot log and I'm going to say promise resolved and then

I'm going to output also the data that I get back.

Now, we could add a second function here, which is going to 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 going to take

the error that we receive back.

And then all we'll do is console dot 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.