Original subtitles

In the last lecture, I have learned about the mutations in these électoral continue with more changes

in the way, how are getting the data?

All right, let's start with our index story is as in the previous lecture, I'll be doing small refactoring.

This has nothing to do with Vucic's functionality.

This will be just a simple function that will simulate the fetch request that can happen to the browser.

The Fed treatments that will go to the Firebase to get a data so they are simulating as closely as possible.

This functionality?

OK up here will create just normal function.

L'Equipe fetch exchanges.

Fetch exchanges.

Exchange chess.

All right.

And will the arrow function, this arrow function will be returning the promise, that's what they usually

happen eventually.

Then you are asking for a data on the internet you are.

You're expecting to receive the promise, and a promise is a data structure that will be resolved after

some time.

So promises usually use when you're opening the files on their computer or they are doing some asynchronous

operations, such as making the request on the internet because you don't know exactly after which time

period this data will get resolved and you will receive them into your codes back.

So for this proposal, I will just create a simulation of the new web promise so you don't hear a new

promise that's you will do it like this and to the promise, you will specify the callback function

like this.

OK.

And here we can set up a timeout, so I will set the zero set timeout.

OK two.

The one second video specified the before and I will say here or this promise will be resolved after

one second.

So it's specified here one thousand in the promise of the parameters of these public functions.

Through the Promise API you are receiving here two functions.

One is called resolve.

The other one is called the reject.

For now, we just need to resolve in the resolve your specified data.

You want to be this promise a result.

In this case, our exchanges appear.

OK, so specify here exchanges.

OK, perfect not have fetched exchanges, and we can completely change this function, get data here.

I don't need to call here any longer as a timeout.

I can remove it and I can simply call here.

Exchanges, I will execute it and I will sign here.

Const exchanges.

OK, this conflict will be working synchronously, because remember of each exchange's great promise.

So what you would get here would be will be not your data of the exchanges, but will be actual promise

structure and the committee will pass promise structure.

But you never you will never get your data in order to resolve the promise you need to make here.

Evade.

So you'll be waiting here until you receive your data and we'll debug it for you.

But let's wait for this.

When you want to use the keyboard to, you need to mark your function as the async so async get exchanges.

OK, so let's recapitulate a little bit what's happening here.

We are calling exchanges such exchanges written promise.

Promised will be executed immediately, these faction will be executed, but as you can see here we

are sitting here again timeout.

So the callback function of the settlement will be executed after 1000 milliseconds.

Since you have here, evade you are waiting here, you are not continuing to commit Antilla.

Death will be resolved, so you are still here after one second.

Here you will call a resolve and you will pursue the resolve exchanges.

The exchanges data you have up here.

So after one second thought of it, fixed fetch exchange escalated your exchanges here, and you can

commit them today to the state, and that's it.

And that's usually how you will see through the Firebirds, actually the thoroughbreds, they have their

own API, but in a in the background it works similarly like this?

OK, let's say it, guys.

Let's go to pause utility.

And after one second, you will receive your data as a beforo so you can see the visually there are

no changes, but we change it little bit.

OK, let's get the bag here, and let's.

Yeah, maybe we can debug it or we can.

Yeah, let's play a couple of days, so have an idea what's happening here?

I've read one debug here run debug an app, an ability to give a data run debugger to get here, promise

and debug into the set timeout.

Our London bureau here, let's let's floated a bit edited by Gareth, sort of idea what's happening.

OK, let's go to Bhavsar.

Let's open the console here and refresh.

Maybe I need to refresh Device two in order to jump into your code.

OK, so you can see here first, we have this section together exchanges.

So we are calling here again the exchanges.

Here we are, calling the exchanges function.

OK, so but I believe one of our this I will click here is Arrow three, some script execution.

I will jump into the next step back here, which is the fetch exchanges, because we called it here,

down here.

OK, we have contacts for exchanges.

We are returning here and you promise as soon as then you instance of the promise is created.

The callback function inside is execute that.

So then I will click here.

Every subsequent execution l'll jump instead of the promise.

As you can see, here we are at the retrieving carousel function in promise.

We are calling a timeout which will be executed after one seconds, but I look like this.

I'm script execution.

I will be hanging here for one second and then I will jump into this line here, so I will click here

again based on script execution.

And it will see actually, I was waiting too long in my debugger.

Disconnected or something happen here.

Let me see one more time, so go faster.

Here, here, here, waiting one second and going to the debugger here you can see that there was this

timeout one second.

And then I also think my exchanges.

And as soon as I voice my exchanges and I will click here, continue script execution, I will jump

here and I have exchanges here now.

OK.

These exchanges here, and I can send them to the comet and the comet, I like it here and that also

they said excellent this year.

So I can even get him a break point on line 58, so just click on the line there is like a debugger

and you can click click here and you should jump here and to the state of exchanges, you can see the

error zero zero said Here state, you have a here area of two and you're having a state, your exchanges

and your consulate properties in the your home page.

Reacting to this and you will read through the exchanges there.

OK, so that's how it works, but I will show you one more time, but I will increase your time out.

Maybe it's more obvious here to three seconds.

OK, I will do some scripts execution a couple of times, so I will go.

Hop, hop, hop waiting three seconds until three.

And then in a timeout and then having resolving and then I'm getting data, so as you could see, we

didn't continue here straight on this line because we have it here.

If I if I will do this, I will show you I will go to actions and I will remove the right here.

This will be a complete mess.

No, I will just save it without the evade.

I will be not debating here until the face off will be executed.

Somewhat will happen.

I'll fresh Elago immediately here.

You can see if he didn't.

You know, maybe I'll get to hear a promise, which is a pending, but didn't wait for a promise or

we don't have a correction just.

Have you got here?

Promise basically what they're sitting here.

And yeah, that's overall not good.

So, guys, that's basically what's happening, and I can get rid of this day by and lots of it, because

that's what should be here.

Remember, whenever you are working with be very request to the network, they usually return promise.

Let's not get back to the one second, one second and let's remove all that the debugger as we don't

need to build on it and it like it is here.

Okay.

And that's going to be it.

So if you see sometimes when you will inspect any functions and you'll see that it returns, promise.

So this arrow here of the brackets and you will see it.

I don't promise.

Remember usually to synchronize a to evade keyboard.

OK, so that's going to be it for now, guys, go back to here and after effects, you should see your

data up there on second look onto next lecture and I will show you how you can make your view more modular.

So, guys, I hope to see you the next lecture.