Welcome back, ladies and gentlemen.
Today, we're going to do promises, and this is a very interesting lecture.
What I want you to do is to create a lecture for and just put it here.
Right?
Same old structure.
Now, there are couple definitions here.
And I have done this on purpose because I want this file at the RNC to be accessible so you can access
this file to get the content.
You don't need to listen to me again, for example, in future, but you can just read it.
OK, so the ethics are very, very interesting feature in in I mean, the promise is a very interesting
feature in year six.
So the definition here is the promise object represents an eventual completion or failure of asynchronous
operation and its resulting value.
Does this tells you much?
Not me.
Well, I didn't I didn't get the first time.
Now, the my definition is promise is an object that may produce a value in future.
This will be a value that is resolved or a reason why it's rejected or not resolved.
So promises like the promises we make to our friends, to our family members, we say, yeah, from
tomorrow, from next week, I will stop eating junk food, I'll take care of myself.
But that's a promise.
It may happen in the future and it will result in something.
Right, but it may not.
So you might have a reason.
You say I don't have enough time to cook healthy food.
And that's why I stuck.
I'm stuck with this junk food right now.
The promise can be one of the three possible states it can be pending.
It's called the initial state, and it's neither fulfilled or rejected.
These are the two states that we're going to see later.
So initial state before the promise succeeds or fails.
Second state is fulfilled or resolved.
Doesn't matter.
I'm going to use resolve most of the time.
But if you read it somewhere fulfilled main meaning the same thing as operation completed successfully
and the last word is rejected.
Well, we don't want failed promises right before promises we had callbacks in.
What is the difference between callbacks and promises?
While the main difference between callback function and promises is that we attach a callback to a promise
rather than passing it.
Remember from yesterday from last lecture, sorry, yesterday was for me, but for you was the last
lecture.
So we did the callbacks where we pass it as an argument.
So we still use a callback function.
We promises, but in a different way.
It's called method training.
Okay, now I promise this lecture will be good.
So let's do it.
So first promise now consed promise.
Let me just write it.
These guys don't worry about it.
Now at this stage you promise we will discuss promise and here I'm going to have resolve.
And reject, you can name this also using REST's until here or RSJ, right in your shorthand.
So now I'm going to say if true now resolve will be this has been resolved.
And there the condition will be totally opposite.
You will say reject human error.
This has been rejected, an exclamation mark right now.
Look at what's happening with the collar here.
I do have resolve yellow in your place, you can have a different color.
But mine is yellow here in yellow here.
But this is dark yellow, right?
And this tells you that I do this on purposely.
These eve conditions will always be true because true is always true and it will get there.
So it will it will run this line of code no matter what.
It never will.
It will never go there.
So if you see a code, something that you do in future and you see some some similar coloring like this
means that your logic is something is not right.
My logic is actually right here because I planned this just to show you the syntax.
Right now I have a variable called Promis Constants.
If you want to say so, I'm going to save the result of these promise there.
Right.
So the how we create new promises using the new keyword, new promise is I have two arguments that call
resolve.
And if I see true, then the result will be this or reject, then resolve will be this.
We are passing a message there again.
But how we can run a promise, how I can see what's inside this promise.
Well, I can get the name of this constant.
It can be anything.
It can be my promise if you want.
So promise that and I can use so it gives me catch word.
Then we're going to talk about this scheduler then later.
I mean we're going to talk about catch later, but we need to do that so I can type only then at this
stage.
But I can do like this that then.
So most of the time you will see that the promises are written like this.
OK, to be more readable.
Now that's it.
Nothing about the way this is going to work.
It's going to work the same.
So if you do it like that then or if you do it this way.
Oh OK.
Let me right here what I need to write, so I'm going to say that then and I'm going to pass here result,
this is a similar thing that we saw where when we did the Ajax call, we the with the fetch function.
Right.
OK, I have two dots there.
That's why it's giving me an error.
Save it.
Let's go back to our here.
This has been resolved.
Beautiful.
Now let's go back here.
Let's make this one more readable.
OK, so let's talk about this part.
OK, now we use that then.
Not when there is an error, so you need to understand only day, so we use promise that then once the
promises resolve, so that then is used when the promise is resolved or fulfilled.
Remember, these two key words are up here, right?
We can't use on rejected promise or rejected promise, we need to use that catch and we will get there.
Don't worry.
So if the promise gets resolved, we can use that then.
So that then method, this method here, you can see the curly brackets, right?
I mean, the bracket is called after the promise is resolved, then we can decide what we can do with
this resolved promise in our example is just to lock it down.
Now, I will do again the fetch method from yesterday, from last lecture.
Sorry again, I'm seeing from yesterday.
And you will see we have done a little bit different there, but we will get there.
Don't worry about it.
So that is pretty much it.
So.
Let's copy this comment and let's change it a little bit.
So I wanted to show you something.
So instead of consoling like this, resolved what I'm going to do, I'm just going to say resolved.
Plus, we're going to concatenate with semicolon in why I can do this.
I can do this because this is giving me a string back, right.
So I can get another string.
Actually, this is considered as a string.
So I'm attaching to string or I'm concatenating two strings with this plus sine.
OK, now.
If you do this, let me just show you real quick, so I'm just going to refresh this part here, just
going to delete this.
And.
Might give me an error and if I promise, has been already declared, OK, let me just copy this one
refresh.
I want to show you something.
And why is giving me this again now?
It's cool.
OK.
So if you go with error up arrow key on your keyboard, you will see the last thing that you have done.
So don't worry about this.
This just to show you.
So promise.
This is the promise that we just built.
And then I have promised that then, OK, now look at what will happen here.
So it will give us promise back.
Now, it didn't give us this has been resolved, but it did give us promise.
Back now.
There is a promise result in the state also.
So now I know.
This is confusing, but because the first then when we use the first, then we it will return a new
promise and now we want to get the result.
So from this promise to get the result, we need to use another day.
OK, that's why we need to use another name, because we don't see the result there.
We just get another promise.
So how we are resolving a promise again with another then method.
So inside here I'm going to say data.
You can name it or you can just result again, data.
And I'm just going to say Konza lock the data back.
Right.
And I'm just going to uncommon this part.
Just going to delete this and save it here.
Then you go, dear.
This has been resolved in semicolon is always there.
Excellent.
Now.
So now I just want to tell you that this when we have using multiple dents, then this is called method
chaining, right?
Because either the result will be resolved or rejected, in our case, its success, it's always going
to be that's why we use another then method and that is called Method Cheney.
Excellent.
Now, you know a couple of things.
What is promise?
How we can create a promise, how we can get results when it's resolved.
Using that, then how we can change multiple then methods to get the result what we want.
Because if we just leave it like this, you saw it gives us another promise.
Right.
And we are resolving a promise using that then.
So let's move on.
That is pretty much awesome, ladies and gentlemen, and I am going to start with something more interesting.
So let's see if there is an error somewhere in this here.
In this case, there can be an error, but we need to make our own error.
So we need to throw an error somewhere here just to show you how we can catch that error.
So now the problem is will get rejected when we throw an error.
OK, so how are we going to throw in there?
Let's let's use it here.
So we have multiple lines and we have when we have an error, an error function, not error.
When I have an error function, we need to use this curly brackets because we're going to have multiple
lines.
Remember this.
And semicolon there, but before we counseling log the data, I can just throw in there.
OK, so this will work for us now, save it and there's a uncute in Promis error and this is what we
got.
But how we are going to get we're going to catch this error.
So why are we catching errors?
Well, we're catching errors just to get information.
What happened?
Because we know we predicted something bad can happen, for example.
Yeah, there can be an error somewhere.
That's why we need to catch it.
And we need to we can write whatever we think that is relevant about the error.
OK, now that catch method we are using.
And we are using when there is a narrow streets opposite of then, right, so that catch and inside
I'm just going to create another function, aero function, not error.
I'm just my language is like that, so I can't pronounce it pretty much clearly.
There you go.
Now, before this, it was uncovered uncut, uncut air.
Now, we just caught that error and we just see error.
Something happened.
Right, good, so that catch is used and is opposed to that then because we want to catch the error
when promise fails, getting any errors.
So.
They start then and catch are mostly used and you're going to see them everywhere, so make sure that
you catch the error that happened.
Now, one more thing that I want to show you here so actually you can use.
In reality, you can use that catch even here after the first then, so you can use it here, right?
But what is that is not a best case scenario.
Why?
Well, if an there it's not happening here and it happens on this one and you have the catch meant that
somewhere in the middle, then the error that happens below that catch method will not be caught.
So the rule is to put this catch at the end, always put this catch at the end.
OK, that is pretty much good.
Now, let's see one more interesting example.
The promises are fundamental part of asynchronous JavaScript, remember, because they don't block the
execution of the rest of the code.
So while the promised spending worries in this stage right here, initial state needs are fulfilled
or rejected before the promise succeeds or fails.
So.
Let me just go back to you.
So while the promise spending or getting resolved or reject it, we can continue executing the rest
of the code.
So, for example, maybe there is an API we are requesting that takes more time than usual or our bandwidth
is playing some role here.
Right.
But we don't want because of that everything else to stop.
Now, we're going to create a couple of promises here, and I'm going to tell you the difference.
OK, so I'm just going to make sure that this is bigger now.
So did this do this together with me?
So can you promise you can call it whatever you want.
And I'm going to say I want equal new promise.
So I'm going to create a couple of promise is that I'm going to have resolve or reject it.
I'm not going to put the full name as I did it here.
So you can use a short version.
OK, now we are going to set time out.
Remember, we used said time out with the callback function, so I'm going to use here result.
I'm going to pass two thousand milliseconds or that is two seconds.
But last time, what I didn't show you is that we can put the message straight to here.
So I'm going to see number one resolve in two seconds.
Good.
So we can pass the message to.
Resolve like this, OK, semicolon there, copy this one one more time.
Actually, we're going to make three four.
Sorry.
So that's due.
This is three and this is number four.
What we're going to change in number to.
We're going to change this to four thousand milliseconds or that is equal to four seconds, right?
This will be how much?
Three thousand.
Something in the middle.
And this should be two as well.
Two, three.
And this will be three.
And the last one will be five thousand milliseconds.
Longest five seconds.
Make sure that you change this to four.
OK, now.
This will show that everything is working asynchronously with promises, so without blocking any code,
because they're waiting to get resolved, rejected, whatever, because we have four in all of them,
they will get resolved in a different time frame.
See, here I have two seconds, four, three, five seconds.
The quickest is to the longest is five seconds.
Right.
So we have a different zoom.
So someone above you now is saying, oh, my God, we need to you need to create so many dents now.
And it's going to be boring now.
I'm just going to call it here, async example, right?
OK, now I'm going to use something else.
I'm going to use something called promise, not all and promise that all is taking an array of multiple
promises.
Let's do this promise.
Let's save this into a variable call or promise that all and this is taking an array of promises.
This is promise that all is iterable.
It is very useful for multiple requests from a different source.
So I'm going to say here, promise, I'm going to put even the first promise.
Why not new.
You promise.
New promise to.
And you promised three new promise for now.
What I can do here, let me just show it to you.
I can comment on this one.
Because that will produce on.
Actually, we can just get rid of this problem, is there?
Right, so you can have this one as well now.
We are not stopping there, so so here promise that all it takes an array of multiple promises, but
now we need to use that then method.
And these that then method will run the results, so here are the results that will be returning it
again as a moderate.
Right, in which is going to console lock the output.
Results very good.
Save it, let's go back here.
Let's wait for a couple of seconds.
And there you go.
So how many seconds think we waited?
OK, let's make this smaller.
Let's save it one more time, one, two, three, four, five.
There you go.
We waited five seconds, why?
Because the longest was five longest promise.
It took five seconds to be resolved.
And that's why all of these were waiting.
Before this promise finished.
OK, so again, you don't see this is non blocking the rest of the code.
Well, I'm just going to show you that that's the case.
I'm going to say a look here, template literals, if this line of code is printed before the four promises.
Then this is async, non blocking.
Coat.
OK, save it there, so I'm going to save it in case there you go.
If this line of code is printed before the four promises, then you have the promises.
Now you see the power of asynchronous programming.
The asynchronous programming allow us to continue with our lives, to continue with the rest of the
code while something else is waiting there.
Nice.
So why it took five seconds while because one of the promises we'll need, we said that time out to
be five seconds, right?
So you don't said more than five seconds or because you don't want to wait.
No, that's pretty much it.
So now you know what asynchronous is in reality.
So I hope this clears all your doubts.
Now we need to do another real usage of promise.
Before that, let's talk about that request, some of you probably have questions about a previous Thach
Ajax call we did in the previous lecture.
So let's repeat that and hopefully this will make sense because we haven't covered promises back then.
OK, nice.
So fetch.
Now, let me just open here, Jason, please.
Jason Placeholder, here it is on yeah.
The users.
I'm going to grab the users again.
So I need this URL, by the way.
Right.
But if you have it, don't worry about it.
Now, fetch you are let me just write the entire thing down and I'm going to say that then.
So why are we using them?
Well, because this return a promise and now we know how to consumer promise.
Oh, that's another word.
So you need to consume the promise.
Right.
So response.
Response that Jason, now a lot of you guys probably didn't understand what that that Jason does mean
to the first time I saw it, it took me a time to think about.
OK, let's save it.
And there you go.
Everything is working because I do have the 10 users from Jason Placeholder placeholder type code.
Right.
OK, now here we are fetching a Jason file across the network.
Why and how do I know?
Well, if I just copied the entire URL.
Basted their.
There I have this, Jason, so we have Jason file across the network and bringing in the council, right.
These two parts are very easy for you.
You understand him, right?
So this this is the simplest used of the fetch, it takes one argument, this is one argument.
The fetch can takes other arguments as well, but don't need to worry about that.
So it takes one argument and that is the you are out to where this file is located, right to somewhere
in the server.
So it gives us the path to that resource we want to fetch and returns a promise now.
If you do inspect it here, if you do go console, put it there.
There you go.
The promise is spending.
That's the status.
OK, now this returns a promised back to us.
So the fetch method returns a promise.
And this is, by the way, a response object.
All right.
So this is a response object and why we use that then and then we use.
Responds that Jason.
Well, now, if we just copied these two lines here, clear it, refresh it pasted back there, now
you will see that I have the promised result as an array of 10.
So to extract the Jason body content from the response to this content here from this response, because
it's still in the promised.
Right.
In order to.
Extract the Jassam body content from the response.
What you need to do is to use JSON method.
Right.
So that is defined by its allowing us to use that jasen method to get it, and after that I'm just concealing
lot of the data.
And that's why when you see the full picture now.
There you go.
You do have access to the data, right, because this it gives you a back, a promise in how you resolving
another promise, another dot then and then you can have access to the data.
But this response that Jason, because these promise returns, hopes, returns, response object and
in that response object, we need to extract the Jason body content and from that response.
And that's why we can use the Jason.
That's OK.
Now you understand.
The whole thing, right?
Very good.
So that is the.
That mattered to.
You are all right.
So we use this in future, this Jason Placeholder is not working, I'm not sure, but it should work
because it's four years there.
And I hope I'm not that
I hope that it will stay like this forever.
I mean, just because I don't want to change the whole lecture because it's not going to work this year.
OK, that's pretty much it.
But if it's not, you can still watch it and see what I'm doing in there.
Pretty much restful APIs, free restful apps out there.
And you can use them now.
Let's create something more even interesting, though, I want you to go back to this Jason Placeholder
here and just scroll to where so Jason plays all that that dot dotcom and we're going to grab the photos,
users and albums.
OK, now I'm going to comment at this point because I don't want to see that apple.
So what I'm going to do, I'm going to create Const. Jason list.
So I'm going to create a list of your URLs and I'm going to grab this URL and we are going to grab the
users first.
Then we're going to grab the.
Oops.
Boasts an album, Suwat.
Very good.
Now, we don't need this part anymore.
I'm just going to zoom in here.
So because we have a list here of you or else we can use Promesa all.
Instead of creating three different promises, I'm going to use promises that, oh, right, and the
promises are all now because I have this list, I can use something like Map Method so I can loop through
this or iterate through these links here and then use them.
So how are we going to do this?
So promise that all and Jason lists that map method.
So let me just type in real quick, so I'm going to see your URL.
Very good.
Now inside, I'm going to return sorry, fetch, then I'm going to see you around then.
Now responds, you already know about this part because I already explained similar to this right response.
Oops.
That Jason, very good, so we can use that method there.
And that is pretty much it now outside of this.
I want to use the den method, Siddharta.
And now you're going to pretty much be confused here, but let me just do it like this.
So date of zero.
So while I'm using date of zero.
Data of one.
Date of three.
Right.
So actually off to.
At the end.
I'm just going to put the catch and I'm going to see here, OK, if I do have some error, I want to
be catched.
So cancel cancel that log and I'm going to say the error there.
OK, now what is happening here?
So we have.
And or with three different links, so I can use promise that, oh, instead of creating three separate
promises right now inside, we can use the map method because we want to loop through each individual
in here from our Jason list right now instead of u r l just type in something else.
It's not going to work.
It was not going to work like that.
OK, so I put a here URL because.
In each direction I'm accessing this, a single URL, the first time that I do through the map method
that iterate through getting this first element.
So remember, we use element or a current element.
You can do that as well.
It's not going to change, but it's more logical because we are extracting in every iteration we are
having access to the current euro.
Right.
So you can see current euro.
Now, that's good.
So then we use FEG.
And in the fetch, there was a requirement to specify the euro, right?
So that's why we've just putting the euro that it's in the current Loopt.
And so we can able to patch that data with this aging skull.
Now this will return a promise for every Leupp we make.
So let me show it to you now.
Copy this one.
Go back here.
You can just you don't need to go there.
Here.
Oops.
Something happened, right?
Good.
But you can just expect to hear it will work anywhere.
So hit enter.
And yet Jason Ellis is not defined great because.
So make sure that you refresh this one.
It now you're going to have a promise.
And inside the promise, the result is three arrays, so zero one in two.
And that's why outside this I can access this each promise by using that.
Then in the data I'm just constantly the date of zero one and two.
So that's why we use that then outside, because we this will return three promises to us and we want
that data for each array.
Right now, this is a perfect example of using promises in async JavaScript.
Save it.
Go back here and there you go.
This is the result.
This is the for the users.
This is the result from the post.
We have 100 too much and then we have albums, 100 albums.
There you go.
So I hope you see the power of promises in JavaScript and.
Yeah, that's it.
So there is also a couple of things new about promises in the next ECMAScript, but we're going to talk
about them later.
And now you understand how powerful these couple of lectures are about the Jason, about the Ajax's.
So we can fetch this right.
About these promises.
And also we did a callback, so you need to understand.
So that's why the callbacks were important.
The promises are very easy to do compared to the callbacks.
Right.
So in future, we will do a async.
Oh, wait, don't worry about it, but that will be even more interesting.
So stay with me.
Make sure that you do the exercise for this lecture.
They are very interesting and there is no exercise for probably there is no exercise for the other lectures.
But this one should be interesting for you.
Right.
Thank you very much.
And I will see you in the next one.