Flutter Tutorial for Beginners #25 - Asynchronous Code

Key Takeaways

okay let my friends so hopefully if you're taking this course you already know a little bit about asynchronous code you might be from a JavaScript background for example and you could be used to working with things like promises async and await an asynchronous code in flutter is very very similar remember asynchronous code represents an action that starts now and finishes sometime in the future an example of this could be interacting with an API endpoint or a database or something to get some data so we start the request but it doesn't finish straight away because it might take a second or two to complete that request to go out and get the data so if finishes so time after the initial request is made once we get that data back in the meantime our code should not stop until that request is complete and the data comes back asynchronous code should be non-blocking so that while the request is being made the rest of the code in our file could carry on so to handle asynchronous code in flutter we're going to use a combination of asynchronous functions the awake keyword and something called futures now async in a way a very similar to async await in JavaScript we're going to see that in a minute and futures are a type of data very similar to promises in JavaScript so if you know all about those then this is going to be a breeze for you so then let's do a little example of asynchronous code in action so what I'm going to do is create a function which will return nothing so it will be a void function this function will be called get data and this function inside here would be responsible for some asynchronous code like getting some data now we're not going to use a third party API or some kind of database to actually get real data at the minute for now what I'm going to do is simulate requests by using some kind of delays because at the end of the day it's gonna take maybe two seconds to get some data from a server somewhere we're just gonna simulate that time it's gonna take by using a delay and we can't create a delay inside the dart language so let's just do a little comment down here to say we're going to simulate a network request for a username from some kind of database or something so to do that we'll come down here and we'll future dot delayed which is a function and this is basically going to say okay use the future object and we'll see more about futures shortly but we're going to use a method on that object called delayed and this is going to trigger some kind of delay now this takes two arguments the first argument is going to be a duration and for that we use a duration object and inside here we can specify how many seconds we want this delay to be for so I'll just say three for example and then second argument is going to be a function which fires once those three seconds are up so this duration object like I said is just going to give us three seconds basically it's a built in class in dart that allows us to specify a specific duration we're passing that duration to this delayed method right here and therefore it's going to wait for three seconds and then fire this callback function it's a bit like set timeouts in JavaScript so what we're going to do in here is just then print the name that we get back let's just say it was yoshi so now we have this function what we could do down here is call this function inside init state so when this state object is first created then it's going to run in its state which is going to call this get data method and then it's going to do this little delay right here which is simulating a network request right it's going to take three seconds to do and then finally we're going to print this so let me now call this get data from in its state now we need open this road panel so we can see this down here and I'm gonna save and what I'll do is go back to the home page first of all then I'll go to edit location again so that we first make up the widget and this is going to run so edit location if we wait three seconds now then we should see Yoshi cool so this works right so nothing special about this at the minute we're just kind of simulating a request but the cool thing is this is non blocking code so say for example I add a print statement down here and I just print out something like I don't know statement it doesn't really matter and then save it what I'm going to do is go back to this page over here and open up this console again then go back to this edit location widget you can see statement gets printed first so even though this comes after this we're not waiting for this to finish until the code can carry on the code carries on even though this duration has not finished and this is exactly how an asynchronous request to going at some date would work we'd start that request but it's not going to block the code it's not going to wait until that request comes back to then print out this statement however sometimes we need it to wait for example say we make this Network request for a username and we get back the username which is your she then we want to make a second request and that second request needs this value so in the API endpoint that we use for the second request member to get a biography for that user we need to use this value we get back so we can't make the second request before the first request has finished so we do need to wait now if we were to copy this and paste it down here let me just put a comment at the top of this one so I'm gonna say simulate Network request to get bio of the username okay so we need two username to get the biography we might pass it into the API endpoint or something like that now if we print down here vegan musician and egg collector that would be the biography right so what I could do is save this and go back over here and click Edit location and let's just change this one to two in fact and save it again so it's not quite as long this one takes two seconds this takes three let's go to edit location notice we get statement first because it's non-blocking then we get this vegan musician and egg collector and their final it would get yoshi so if this depends on this then this kind of code won't work because we're still starting this before this is even complete so how do we combat this how do we make this a little more synchronous so we have to do this and wait for this to complete before we start this next line well we'd use a come nation of an asynchronous function so we'd say up here this is an async function and we do that after the parenthesis and before the curly brace so we're now saying look this is going to be an asynchronous function with asynchronous code inside it and then we also use the await keyword which would be this thing right here so now we're saying okay right here I want you to wait right here until this is done to start the next line now what I could do is save this and if we open up the run again then if we go to this and it location again notice now that we have to wait until this first one is done we get Yoshi first of all then we get statement because obviously the code carries on and this is non blocking it takes two seconds so it carries ons here but then after two seconds we get this at the bottom as well so now we are waiting now what if at the bottom we want to wait for this one as well so say we want to output the name that we get back and also the bio at the bottom well we could then place the await keyword right here now the good thing about this a weight keyword is that we can actually assign a value to it so say for example when we make this request is some kind of API endpoint ultimately it's going to return a string value to us we can simulate that by returning instead of printing here and I'm going to return Yoshi so we return this value now now what we could do is say okay well now we'll store that value in a string variable and I'll call this username and set it equal to this so now we're simulating this request right here let me just move this down and move this in so we have more room we're simulating this request to get the username and then it's returning this username which is a string now imagine this was an API endpoint which returns this and it takes three seconds it's the same kind of thing we're saying here right I want you to wait for this to finish before you move on so don't go any further than this once you have that value then carry on and assign it to this variable so now Yoshi will be stored inside this variable and the code will continue and we can do something similar here we can say string and we'll call this something like bio and set that equal to this and then we'll go out and we'll make this request right here we need to return this instead of printing it like so and this request will take two seconds we're going to wait for it to complete when it returns a value then we assign that value to bio and we carry on and down here we could output the username now and the bio so I could say the username - and the bio like so okay so let's try this out now I'm gonna save it I'm going to open up this tab over here and then go back and then I'm gonna click Edit location again so click that and we should wait for the first one first of all Yoshi then wait for the second one which takes two seconds and then finally just print out this at the bottom this is the only time we're printing them so now we are waiting for each request to complete before we move on and this is really good when one request depends on another if they didn't depend on each other we wouldn't need to do this but since this one would depend on this then we can use a weight to do that and since at the bottom we need to wait until both of these values are returned then we can await this one as well now the really good thing is that because we've said this is asynchronous over here then this is not going to block any other code inside our file over here so say for example we get data which is an asynchronous function and underneath that we want to say print and then we'll just say something like hey there and save it so when this runs it's not going to wait for this to complete before this runs because it's outside the scope of this asynchronous function we're not using a weight in front of this here we're just using it in front of these things so it's going to start this this is going to do its own thing and then in the meantime the code can carry on down here so once more let me just preview this I'm going to save it and then open up the runt panel and I'm going to go back and then edit location again and we can see hey they're prints it doesn't wait for all of this get data stuff to finish and then eventually we get this stuff when it's complete so hopefully that kind of explains asynchronous code a little bit to you because we are going to be using this kind of stuff in the future when we actually use a third party API to get time information and we're going to start that probably in the next two lessons also first of all I want to talk about flutter packages because to make these network requests we're going to use a package which is really going to help us so we're going to talk about packages in the next video