All language subtitles for 009 Handling Dart Futures_en

In the last section, we took a look at the documentation for the jet function, and we noticed that

any time we call get it appears to return something called a future.

So in this section, we're going to talk a little bit about what futures are and get a better handle

on them.

Now, let me cut to the chase right away with futures.

If you've ever worked with JavaScript before and you are familiar with promises, a JavaScript promise

is identical to a future in DART.

So when you see the word future, you can just think JavaScript promise is the same thing.

If you've never worked with JavaScript before or you've never dealt with promises, that's totally fine.

We'll talk about what they are right now.

So let's first get started by taking a quick look at a diagram.

So inside this diagram, we've got our mobile device over here that's going to make a HTTP request over

the Internet to this outside API server.

It's going to request some amount of data.

The API server will see the request and respond with the data.

Now, what this diagram right here doesn't show is the fact that it might take some very substantial

amount of time for this request to be completed.

Our mobile device might have a really spotty Internet connection, and it might take this request anywhere

from one hundred milliseconds to 10 seconds to complete.

So we have to assume that it's going to take some amount of time to fetch our data from this API.

And that's what that future is meant to help with.

Futures are meant to help with code that will take some amount of time to execute or any event that

might take some amount of time to execute, to get a better handle on what a future actually is and

how we interact with it.

Let's work on a quick example over inside of Dart Pad.

So I met Dart Pad, Dot Dart langue over here.

I'm going to first write out my main function.

I'm not going to put the void return on this just yet.

You'll see why in just a moment.

And then at the very top, I'm going to immediately import a package called Dart Async.

This async module as a part of the Dart Standard Library has all the support for fut. include inside

of it.

Then at the bottom of this file, I'm going to create a new function.

You do not need to write this function.

I encourage you to just watch for a moment.

It's going to be a function that's going to simulate how that get function from the package works.

So I'm just going to copy and paste it over like so.

So we don't really need to know a whole lot about the jet function right here, though, just copy paste

it in again, it's really just supposed to kind of mock or copy how the jet function from works so we

can call, get and pass in a string.

And then at some point in the time, in the future, it's going to return some data to us.

So let's get a better idea of how to work with the future that gets returned from the jet function.

Inside of mine, I'm going to call get in, I'm going to pass in just some, you know, arbitrary,

whatever you call the get function doesn't actually make a request.

So I'm just pretending like we are making a request right here.

So when we make this request, it returns back to us, a future that will resolve at some point in time

with the actual data that we got back from this fake request.

If we just print out the results of the jet function right here like so.

Then we're going to see up here that we get back a future so we get instance of future right here to

the future or whatever you get back from the return or the get function right here is not directly useful

to us.

Instead, this future is an object that will notify us when our data has been successfully fetched.

So I'm going to delete that print and instead I'm going to add on up top a print statement that says

about to fetch data.

And then to get some notification when our data has successfully then fetched or to kind of hook into

this future and be told when the future is resolved successfully, we can change on a dot, then function.

So on the future that gets returned, we're adding on a dot, then function call.

This is a function that we can call with a function like.

So now the inner function that we are providing right here is going to be called with the result of

the future.

So I might receive that argument as something called result and then I will print it out inside there

like so.

So now if I run this code, I will instantly see about to fetch data appear, so there it is.

And then three seconds later I will see got the data, they got the data string right here is what our

future resolved with.

So you can see down here, I'm returning the string, got the data.

So essentially to get the data or to get the information that comes back from our request, we can change

on a dot then statement.

We can pass in a function that will eventually be called with the data that got returned from that API

endpoint.

Now, there's one other way of working with promises, and this other way is a lot more convenient than

worrying about this then thing right here.

So I'm going to delete the code I have right now and only leave behind the print statement and the get.

So the other way of working with futures, and this is the much more easy and straightforward way of

working with them, in my opinion, is to use a slightly different syntax called the async await syntax.

So again, if you're coming from the JavaScript world, this is probably going to seem pretty darn familiar.

Our get function right here returns a future we can wait for that future to be resolved automatically

and get the data that comes back from it by adding the awaits keyword in front of it.

Now, whatever this promise resolves with will be returned from this overall awake call.

So I can say var result equals async first me Fasel equals a wait get blah blah blah.

Whenever I use the awake key word right here, I have to mark the inclosing function with the async

keyword.

So right after my argument list up here, I'm going to add in the async keyword and now I should see

that er go away.

All right, going to zoom in or zoom out just for a second so we can see that whole line like so.

So by adding in the async key word right here, it informs darte that our function contains a future

and it needs to at some point time wait for that future to be resolved before continuing execution of

this function.

So the async and await keywords go together very closely.

After a waiting for the results from this dysfunction right here, we can then freely print out the

result like so.

So if I now run this code, we're going to see about to fetch data and then three seconds later.

Got the data appears as well.

So, again, throughout the rest of this course, we're going to use the async await syntax because

it's extremely effective and very concise.

But just so you know, we could also as easily done the more classic dot than syntax like that as well.

Totally up to you which way you want to go.

You will see some documentation that uses the DOT then syntax right here, which is the only reason

I show it to you.

In fact, if we go back over to the HTP package documentation.

And go to the main page right here, you'll see that they use the DOT then syntax here as well, so

you will see the dot then syntax used in documentation.

But for you and I will use async await.

OK, so that's a little bit more on FUT..

Let's take a quick pause, come back to the next section and handle the future that we get back from

our get request right here.

So I'll see you in just a minute.