Loops with Async / Await

In this drive by code session we show you how to use loops with async / await. Async / await makes async programming with loops possible - something that was not really possible before. This is part 3 of a multi-part series on async / await - a JavaScript feature introduced in 2017.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : hello and welcome to another drive-by
00:02 : code session this is going to be a part
00:05 : 3 of a multi-part series on the
00:08 : async/await job as good feature again my
00:12 : friend white kid has made some code
00:16 : examples and I'm gonna replay them and
00:19 : explain what he did again the code
00:23 : examples will be in typescript
00:25 : however if you are Phoolan fluent in
00:28 : JavaScript then you should have no
00:30 : problem following along again in the
00:34 : examples we'll be using a tool called
00:38 : the JSON server which is a tool that
00:41 : quickly sets up a full fake REST API
00:45 : with zero coding in less than 30 seconds
00:48 : and I can attest to that and why kit can
00:51 : attest to that too and this episode will
00:56 : be about looping how does loops come
01:01 : into play in async await so let's get
01:04 : right into the code so this is yeah this
01:10 : is the actually the code that we ended
01:13 : up with in episode 1 of the series and
01:16 : this is code that gives you a countdown
01:20 : liftoff sequence so if you ran this we
01:26 : have 5 4 3 2 1 liftoff and and as you
01:34 : can see without the ability of
01:36 : async/await down we would end up with a
01:39 : series of nested set timeout statements
01:43 : that look kind of gnarly but if you look
01:47 : at this code there's a room for
01:49 : improvement here in particular there's a
01:51 : lot of repetition in this code we can
01:54 : remove the code repetition here with a
01:56 : loop so so that's what we're gonna do so
02:00 : we're gonna write make a counter a
02:03 : variable that starts at 5 and now we'll
02:06 : have a while loop that keeps looping as
02:08 : long as the count is greater than zero
02:11 : and we
02:12 : gonna decrease the count by one after
02:16 : each time of printing it out and then
02:20 : importantly we're gonna do a sleep of
02:23 : 1,000 in within the well loop and then
02:27 : after the while loop is done finally
02:29 : we're gonna print lift off so this code
02:32 : works just as before and so if you are a
02:38 : seasoned programmer you might be
02:40 : thinking okay this is pretty obvious why
02:43 : are we talking about this what you might
02:46 : not have realized that is that we have
02:48 : actually just stumbled into a territory
02:52 : where async/await actually really really
02:57 : has given us something that was never
03:01 : possible before in the past without
03:06 : async/await to do the same thing that
03:10 : we're doing here would have been kind of
03:13 : non-trivial but I'm going to save that
03:16 : to the end of the episode for now let's
03:19 : jump to a different code example
03:22 : involving Ajax calls so we're gonna
03:25 : fetch the less of the teams in our
03:28 : database our database being these so
03:31 : this is the way that JSON server works
03:36 : is you just give it all of the data
03:38 : models in one flat file like this so and
03:43 : if you make an API call sort of named by
03:48 : a particular top-level property of this
03:52 : JSON object you simply grab that
03:55 : subsection of the JSON object so this
03:57 : call gets all of the teams and we'll use
04:00 : async/await
04:01 : to wait for the array of teams so now we
04:05 : know the teams the team's variable has
04:09 : an array of teams in it then we're going
04:13 : to render the teams on the page and to
04:17 : do that we'll kind of
04:20 : HTML string and just keep incrementally
04:24 : adding tags in this case Li tags to it
04:29 : to to students assemble lists of teams
04:35 : and now finally appended to the document
04:37 : body so if we run this now we have the
04:41 : team's rendered in an unordered list now
04:47 : what if we also wanted to list the team
04:51 : members so the way this is set up is
04:55 : each member of the team is actually
04:59 : encoded within the team object as an
05:02 : array of ID's however if you wanted to
05:05 : actually get the names of them the team
05:08 : members actually have to make yet
05:09 : another Ajax call to get there to fetch
05:13 : the person and then plus their name so
05:18 : and and this is a mistake that I have
05:23 : seen a lot of people make so I've seen a
05:28 : lot of people do this to try to get this
05:31 : to happen
05:32 : they'll make an API call using jQuery or
05:37 : another
05:39 : Ajax library of choice and they'll do a
05:43 : callback style API call like this
05:47 : expecting this to work however this
05:52 : doesn't work and what happens instead is
05:54 : this
05:56 : we actually don't get to see any team
05:58 : members so what gives I'm actually gonna
06:03 : give that to you my viewer as a riddle
06:06 : so can you figure out why this doesn't
06:10 : work I'll give you a little bit of time
06:13 : to read this code and try to come up
06:16 : with the answer yourself you're
06:18 : perfectly welcome to pause the video if
06:21 : you would like more time to come up with
06:23 : the answer I'll give you a couple of
06:25 : seconds to decide if you want to do it
06:28 : or not okay so if you
06:33 : got the answer congratulations that
06:36 : means you have a pretty solid grasp of
06:39 : how a synchronicity
06:41 : a synchronicity in JavaScript works but
06:45 : however if not if you just want to enjoy
06:48 : the show well the problem is that this
06:54 : call here oops let me try to draw better
06:59 : lines this call here is a synch oops
07:06 : and if we're unless we're using the
07:10 : async/await feature javascript is not
07:12 : waiting for this operation to finish
07:15 : before moving on to the next step so
07:18 : that is gonna mean that all of this of
07:23 : the stuff that happens inside this arrow
07:28 : function here this aka the inner
07:31 : function here of the stuff that happens
07:35 : here will be deferred and in fact if if
07:42 : this is the time line and if this is the
07:47 : time where we call main which is this
07:53 : function here main let's say main takes
07:56 : this long to execute so maybe this is an
08:04 : Maine Maine is gonna for each team
08:08 : member on this line Maine is gonna start
08:13 : this Ajax call yeah actually gonna give
08:16 : it a different color Maine is gonna
08:18 : start this Ajax call once for each team
08:21 : member so let's say there were a total
08:23 : of five team members five times that
08:26 : this happened and actually do it once
08:30 : [Music]
08:32 : not whoops
08:45 : you know actually spawn of one of these
08:49 : operations per team members so this is
08:53 : team member one two three four five
08:56 : assuming there are five team members one
09:00 : for each member so that while the tool
09:07 : was here trying to well actually not
09:11 : here but well the code is here trying to
09:13 : append groups trying to a pen string to
09:18 : this Li HTML it's already too late this
09:23 : line and this line and this line and
09:25 : this line have already executed way
09:28 : before this line this line gets a chance
09:33 : to execute and that's a problem how do
09:36 : you solve it
09:37 : well async away we can tell Java Script
09:42 : let me tell JavaScript to just wait for
09:45 : this operation to finish before moving
09:47 : on to this line now that we have a sink
09:51 : away so what do you do well you you get
09:56 : the promise back from the API call and
09:59 : then you await it and then store it into
10:03 : a variable and then deal with it
10:05 : and now JavaScript will actually wait on
10:08 : this asynchronous operation before
10:10 : moving on and that is gonna give us the
10:16 : desired result we still have a small
10:19 : problem in that there's a little comma a
10:24 : trailing comma in this list of names but
10:29 : a white kit is gonna fix that up really
10:31 : quick it's gonna use the entries API of
10:35 : the JavaScript array to also get us an
10:38 : index number in addition to the ID in
10:41 : the array and
10:43 : he's gonna write a conditional that
10:45 : determines whether we're at the last
10:48 : index or not if it's the last index put
10:51 : dot there and then if it's not then put
10:54 : a comma in there so that should fix the
10:58 : trailing comma problem okay now back to
11:03 : this so earlier on we said that the fact
11:08 : that async/await allows us to basically
11:13 : a wait for something asynchronous within
11:16 : a loop that's something that used to be
11:20 : non-trivial to do so how did JavaScript
11:25 : developers do this before
11:26 : without async await because before
11:31 : having a single way we didn't have
11:33 : access to be able to sleep use asleep to
11:38 : wait on a set timeout so if all we had
11:40 : was set timeout how did we achieve this
11:44 : so I'll post that as another challenge
11:47 : to you the viewer again if you would
11:51 : like to take some time to think about
11:53 : that you can always pause the video to
11:56 : do to do so I'll give you a couple of
11:58 : seconds to decide what do you want to do
12:00 : that or not
12:03 : okay if you've figured it out
12:06 : congratulations but if not then and all
12:11 : you wanted to do was enjoy the show well
12:14 : let's see if you came up with something
12:17 : like this so you do a set timeout inside
12:23 : of the while loop then this will not
12:26 : work JavaScript just gonna laugh you in
12:29 : the face the correct solution let me
12:33 : show you what would happen if you did
12:35 : this so this page is frozen now and
12:43 : completely unresponsive and instead in
12:47 : fact I cannot even do any productive
12:49 : work here until I can close this tab and
12:54 : I couldn't even close it
12:56 : first time because this tab became
12:59 : completely unresponsive I have to click
13:02 : the close button second time in with and
13:05 : then chrome will actually forcibly close
13:07 : it so what was the problem here well the
13:10 : problem is that again JavaScript doesn't
13:14 : wait when you when you call this set
13:18 : timeout operation here JavaScript will
13:23 : start this timer and defer the execution
13:29 : of these lines sometime in the future
13:33 : but this in this case it will this
13:36 : sometime in the future will never happen
13:40 : because this loop will actually keep
13:46 : going so the while loop here and well
13:53 : let's say this is line number two after
13:57 : this set timeout line the execution of
14:00 : the code will go to the end of the loop
14:03 : and then jump right back to the top so
14:06 : the next line that gets executed is
14:08 : again line number two and then and then
14:12 : the next line is the line number three
14:13 : again here and then there was spawn
14:18 : another timer which again will never
14:21 : have a chance to execute because this
14:24 : loop is going on indefinitely this will
14:29 : become an infinite loop and because this
14:33 : loop will never have a chance to get out
14:36 : because we will never reach this
14:40 : statement that subtracts one from the
14:42 : count and then this conditional is
14:44 : always testing is the count less than
14:47 : zero yet it will never be less than zero
14:49 : because we will never reach this
14:50 : statement this tight loop will loop
14:53 : forever
14:53 : therefore freezing up the browser and
14:56 : because this JavaScript is too busy
15:00 : looping tight looping in this world it
15:03 : will actually never have a chance to
15:05 : take a breather and
15:07 : then handle these handle this
15:12 : these timer handlers when the timer
15:16 : actually goes off in JavaScript actually
15:18 : doesn't have room to take a breather to
15:20 : actually execute these lines at all so
15:25 : okay so that doesn't work so what's the
15:27 : correct answer the correct answer is
15:29 : recursion you have to write a recursive
15:32 : function like so and also you have to
15:35 : call the recursive function to kick off
15:38 : the process the first time so this is
15:40 : this kind of like a contrived while loop
15:43 : you can think of this as the conditional
15:45 : of the while loop so this is saying if
15:47 : the counter is still greater than zero
15:50 : we're gonna print out the count and
15:51 : decrease one from it and then we're
15:55 : gonna use the timeout to call this same
15:58 : function again in one seconds time but
16:02 : if the count is not greater than 0 it is
16:06 : 0 then we're done we're not going to
16:08 : recursively call the function again
16:10 : therefore do another countdown we're
16:13 : done with countdowns if the count is
16:16 : already 0 and we just kind of print
16:18 : liftoffs and this code will do the same
16:22 : thing I'll prove it to you by running it
16:29 : so 5 4 3 2 1 liftoff
16:37 : so this this kind of a combination of
16:41 : recursion and asynchronous call that is
16:45 : I feel like that something is kind of
16:48 : unique to JavaScript not that only
16:50 : JavaScript can do it but it's something
16:52 : that I really haven't seen anywhere else
16:57 : other than JavaScript even though in the
17:02 : world of async await we will probably
17:04 : never need to use this again but I still
17:07 : suggest you taking some time to wrap
17:09 : your head around this because this is a
17:12 : real cool concept so that is the end of
17:17 : this drive by code session
17:19 : I hope enjoyed it I hope you enjoyed it
17:22 : and waked and I will will probably be
17:25 : cooking up some more async/await
17:28 : examples in the future and I hope to see
17:32 : you then