Concurrency in Flutter and Dart - Running Multiple Async Requests at Once - Programming Addict

all right so in this video you're going to learn how to run multiple asynchronous tasks mostly http requests concurrently or at the same time when running multiple things at the same time it basically allows us to get all of the results we need more quickly if you don't understand what i'm talking about that's okay that's great now we're going to jump into the code and i'm going to show you what the problem is with running requests one after another and then i'm going to show you how to fix it and how to run multiple requests at the same time all right so now we are in visual studio code and i have a simple mobile application open so what this mobile application does is it fetches a post with its title and its description and it also shows all the comments for that post and this date is being fetched from json typey code api what this is is a placeholder api where we can just get all sorts of data posts so we can get a single post we can get comments for that post this is basically a placeholder api for people that want to learn how to use apis so if you're one of those people make sure to check this out it's a very interesting project for beginners okay so now let's actually write the code for getting this post and a list of comments for that post so here we have the init state method and i'm just going to write a separate fetch data method because it's going to be asynchronous and we're going to fetch all of the data we need once the page is initialized so let's create a new method fetch data right and i'm going to cut it and put it at the top here and a couple of things i'm going to make this a future if you haven't seen my video in futures go and check that out because this is not going to make much sense so we're going to also make this method asynchronous and then we're going to show a loading indicator just so our users know that we're loading something and then we're going to say final post result equals await http dot get and then we're just going to hard code url to get a single post so again what we're doing here is we're using the http package if you don't know how to use this package you can just install it by putting it into your pubspec.yml file and if you're using visual studio code just save the file and it's going to install the dependencies for you so here what we're doing is we're getting a single post and we're getting some sort of a result there right and then after that since we also are displaying the comments for that post we need to fetch that as well so i'm going to copy this we're going to say comments result but i'm going to change the url from posts i'm going to say comments and i'm going to pass it the post id so if we quickly go to the browser and try to query this we're going to get a little json thing and if we get the comments for a single post we're also going to get a bit longer of a json so as you can see over here that's basically the data we have over here so here is the email of our commenter and here's the email of the commenter here so there's really no magic going on it's just all very simple okay so now that we have these results we can try to display them so before recording this video i wrote some code so here we have a post property and a comments property and here i have a whole bunch of code for displaying all of that but for this video i really don't want to focus on drawing of the ui this is just the placeholder ui so we can show how this actually applies to the real world so what i'm going to just do is initialize these two properties and then once we initialize them we're going to be able to display all the data we need so i'm just going to use the set state method so we can update the local state and i'm going to say post is equal to post result dot body but since body is a string we need to convert it to a map of string dynamic and we can do that using the json.decode method and that's pretty much it for the post we can do the same for the comments so we can say comments is equal to json.decode comments result dot body and it will do the same thing it will convert it will convert the raw json string into a list of dynamic objects which are basically going to be maps so now when i save this code and restart the application we can see a loading indicator for a short while oh and we forgot to hide the loading indicator so it's going to basically show up forever so we're just going to say false we're going to say save and we're going to restart the app so now again we see the loading indicator for a short time and then we see our blog post so this is quote unquote dynamic data in short this is data fetched from the jsonplaceholder api but there's a little issue with this code that we have now this code works but it's not as optimized as it should be basically what's happening here i'm going to put a little break point here so we can see what's happening so i'm going to restart the app once again so we can hit this breakpoint and see what's going on now we're at the line where we're supposed to fetch our single post so what we're doing it here is we're waiting for that single post to arrive and once that arrives then we start fetching a list of comments and what that does is it basically slows us down even though this is a very simple example where it's very quick you don't even notice any any issue with it what we're basically doing over here is let me go over here so we're saying i want to get a single post and then only after we get that post we say hey get me the comments for this post which is not as efficient as it could be because we are waiting for the first request to finish so we can start the second request but the second request is not dependent on the first request so in the ideal world we should be able to run these two at the same time so we get all of the data as fast as possible basically so yeah this is what's happening over here we're first getting a post and then only after the we get the post we get the comments for that post but more ideal thing here would be is if we invoked all of the requests at once so we have one request like get a post then we have get comments and maybe we can have something else and when these run at the same time it's generally going to be faster that's basically all i'm saying so the way we can fix it is if we use a little method from the future class and that's future.wait and what future.way does is it takes in a array of futures and if you don't know a future is basically any method or any variable whatever that can be awaited or that has a den method again watch my video on futures if you're not familiar with this because this won't make any sense so http.get is actually a future because it's an it's an asynchronous operation it takes some time to execute so what we can do is we can copy these two into here and just say await and what this does is it invokes both of these requests and then waits for both of them for to finish and the way it differs from what we had below here is it executes these at the same time if it can so again for this simple example it won't make much of a difference but when you have multiple multiple when you have three or four requests it can make a drastic difference in your user experience so what we have to change here now is we can delete these two lines and just say final results and this is going to give us an array of results so now instead of post result and comments result we have results of zero and results of one so yeah that's pretty much everything that quote-unquote fixes this code so let me put another breakpoint here save the app and refresh it and i'll just wait for the app to start up okay now when we stop on this line i say f10 it immediately invokes both of these requests and then finishes once both of these are done so effectively we have quote unquote sped up everything and yeah and this code will work basically as the first one but it will just be a bit more efficient okay and yeah that's pretty much it on this video if you have any questions on futures post them in the comments and yeah if you enjoyed this like the video subscribe to the channel there will be more content in the future i promise that's pretty much it bye

Channel: Programming Addict

Views: 14,386

Keywords: flutter tutorial, google flutter, flutter json, flutter sdk, flutter widgets, flutter app, flutter app development, flutter apps, flutter free tutorial, flutter mobile app, learn flutter, flutter app development tutorial, flutter future, futures, async, await, flutter async, flutter await, flutter await requests, dart language, dart async, asynchronous programming in dart, concurrency flutter, Concurrency, Async Requests, Running Multiple Async Requests at Once

Id: rhw3y9iAak8

Length: 9min 28sec (568 seconds)

Published: Sun Nov 15 2020