Ajax with Async / Await

In this drive by code session we’ll cover how to use async / await while making ajax calls to make them less nested and more straight forward. This is part 2 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 a drive-by code
00:02 : session this episode is going to be a
00:06 : continuation of the first episode on
00:09 : async/await
00:10 : this is the second in the series and
00:12 : again white kit has created some code
00:14 : examples for me to demo and use that to
00:23 : demonstrate some async/await features
00:25 : this episode we're gonna gonna look at
00:30 : how Ajax or HTTP requests work with
00:34 : async/await
00:35 : again we're gonna be using typescript
00:38 : the examples are written typescript but
00:41 : if you are fluent in JavaScript you
00:43 : should be able to follow along no
00:45 : problem and also these examples use the
00:50 : JSON server which is a tool for quickly
00:55 : setting up a fake REST API for prototype
01:00 : prototyping ideas for front-end
01:04 : developers without further ado let's get
01:07 : right into it so we're gonna be using
01:09 : jQuery to make Ajax requests so a
01:14 : standard Ajax request with jQuery is
01:17 : made like this using the dollar that get
01:21 : API the URL here and then a callback
01:27 : function so if we ran this we'll get an
01:34 : array back and so this array has got a
01:40 : couple of objects and that each of them
01:42 : is a project which has an ID the project
01:45 : name and a team ID and the next thing we
01:50 : want to do is render these projects onto
01:53 : the page inside of an untitled list so
01:57 : one way of doing that might be loop
02:00 : through using array dot map or loop
02:02 : through the projects and
02:04 : I'll attack for each of them and then
02:08 : stuff that dynamically generated HTML
02:11 : into the projects tag and now we have
02:17 : these projects as a list on the page now
02:21 : okay now how do we convert this code or
02:24 : rewrite this code using the async await
02:28 : feature well the first thing we would
02:30 : want to do is to hook into JavaScript
02:34 : and not job is good hope mintue jquery's
02:37 : promises support so this get method in
02:42 : fact the support promises as long as we
02:46 : use it the correct way which is if we
02:51 : choose to use it the callback style
02:54 : it's totally happy to allow us to use it
02:57 : the car back style but we could also
02:59 : choose to use it in the promised style
03:02 : which is like this so if we use it in
03:06 : the promised style which means there's
03:09 : no callback no callback if there's no
03:16 : callback then this guy the return value
03:22 : of the get this guy is actually a
03:25 : promise that has some data in it and the
03:30 : way with a promise the way to unboxed
03:33 : data and make it available to our
03:35 : application is by using this Dan
03:37 : callback and then the data will be
03:40 : provided to us via this function
03:43 : parameter however now that we have a
03:46 : single way we could write this guy
03:49 : differently using what else they sink
03:52 : away so as you remember from the first
03:55 : episode first we need an async function
03:58 : in order to be able to use the await
04:01 : feature and then we just call this same
04:05 : same API here like so we call it here
04:12 : and then now again this guy gives you a
04:14 : promise of the data
04:17 : now to unbox the data we just await and
04:20 : when you know it'll wait a sink oh wait
04:23 : we'll wait for this request the to the
04:28 : response to come back and then when it
04:30 : does it'll just hang here while it's
04:34 : going and then when it finally does
04:36 : it'll take this data unbox it and put it
04:38 : in this variable where you wanted it and
04:42 : so now this code can be more
04:47 : straightforward and this code for
04:50 : generating the HTML is identical to the
04:53 : code that we used to have inside this
04:56 : callback function here and now if we
04:59 : call this mean function and run it we
05:06 : should get the exact same result
05:09 : okay now let's say we needed to make yet
05:12 : another request this time to get the the
05:18 : team's so that we can figure out for
05:22 : each project what team it belongs to and
05:27 : we also want to put that onto the page
05:29 : like here so this is how you have done
05:34 : it without a single weight which is you
05:39 : first make the API call then use this
05:42 : callback whether you use the promised
05:45 : style of then and then a callback or
05:47 : just put this callback directly in as a
05:50 : parameter doesn't matter either way
05:52 : you're doing this style of callback
05:55 : based programming so within the callback
05:58 : you have to make another API call which
06:00 : done has yet another callback nested
06:03 : inside of it
06:04 : and this is where callback based
06:08 : programming can start getting gnarly
06:11 : well this does work let's see how the
06:17 : what the corresponding code for async
06:21 : await looks like
06:24 : oh okay so this is it
06:34 : so with async/await all that was needed
06:37 : was to add another line to fetch all of
06:42 : the teams and then the combination of
06:46 : the data of the team data and the
06:48 : project data is done in the identical
06:52 : way as as the classic example but
06:55 : everything is done in a straight line
06:59 : fashion there's no additional nesting
07:02 : needed to to get this behavior let's see
07:08 : this code working and there it is
07:10 : there's the project name and there is
07:13 : the team name the team who almost this
07:15 : project okay now let's say you don't
07:20 : want to use jQuery because you think
07:22 : jQuery is a large library and since
07:26 : you're not really using jQuery for its
07:29 : Dom processing because maybe you are
07:31 : using an advanced UI framework such as
07:37 : react or a view or angularjs you're not
07:40 : gonna use jQuery for this anymore
07:43 : so a popular choice is the fetch API the
07:47 : fetch API is at this point is a pretty
07:50 : recent addition to the to the native Dom
07:55 : API and I'll show you how to use async
08:01 : await with the fetch API so first thing
08:06 : is we change the dollar that get to call
08:12 : the fetch API instead and now we have
08:15 : some errors here and the reason for the
08:19 : errors is because we await the result of
08:24 : the fetch function call what you
08:27 : actually get is a response object rather
08:30 : than the data that would have been
08:33 : gotten from the response what you then
08:37 : to do is ask the response to parse the
08:45 : json data within it which also yields a
08:48 : promise so you have to await it again so
08:52 : we'll do that for both of these API
08:55 : calls like so and this should do what it
09:03 : did before so one way to think about it
09:06 : is that this guy here here it is a
09:14 : promise but not the promise of the data
09:17 : but a promise of the response so when
09:22 : you await on it the response will be
09:24 : taken out of the promise and put here
09:27 : but then this guy you have to say
09:30 : responds JSON to get you a promise of
09:34 : the data here so this guy this yellow
09:38 : box here is a promise to give you the
09:42 : data so which means again you have to do
09:46 : a wait to get the data out of the
09:48 : promise and I put it in your variable
09:51 : here so this is how use the fetch API
09:55 : there's a additional step which if you
09:59 : do this repeatedly it can start getting
10:01 : tedious but in a separate episode we'll
10:04 : we'll give you an idea for how to get
10:07 : rid of that tedium lasting in this
10:11 : episode that we wanted to cover was a
10:15 : common gotcha of using async awake and
10:19 : that is forgetting to write the way
10:22 : keyword so if you forget to write this
10:25 : wait keyword when when you have a
10:31 : asynchronous operation here you remember
10:36 : that the return value of the
10:39 : asynchronous operation this is a promise
10:41 : promise of something if you expecting
10:45 : the data that's in it well in this case
10:49 : it would be
10:49 : data so write data if what you're
10:53 : expecting is the data but you don't have
10:56 : the data then you're gonna run into
10:58 : issues in this case teams is not an
11:02 : array so you can't do teams that find on
11:04 : it so if you run this code if you run
11:09 : this code is gonna say teams that fine
11:11 : is not a function so that's the kind of
11:14 : error that you might encounter it might
11:17 : be take a while to get used to but if
11:21 : you get started on if you get started on
11:26 : writing a lot of code using async away
11:28 : you might run into these issues so just
11:31 : remember to whenever you are doing an
11:33 : asynchronous operation like an ajax call
11:36 : always remember to await it that is the
11:39 : end of this drive by code session I hope
11:42 : you enjoyed it and we waked and I are
11:46 : planning to come up with some more
11:49 : material for you in the future and I
11:51 : hope you join us thank you