File IO in Node.js with Async/Await

In this drive by code session WaiKit and I will cover how to use async/await in Node.js. This is part 4 of a multi-part series on the async/await feature of JavaScript.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : hello welcome to another drive-by code
00:02 : session where my friend white cat write
00:05 : some code and I explained what he did
00:08 : this is going to be part 4 of a series
00:11 : on async/await
00:13 : for those of you out there who are
00:16 : really trying to learn async/await
00:18 : trying to wrap your head around it i
00:20 : recommend this resource there's a good
00:23 : async/await tutorial on JavaScript that
00:26 : info for that this episode is gonna be
00:30 : dealing with nodejs
00:32 : so we're gonna be working with in
00:34 : node.js and see how async/await applies
00:36 : in that environment we will use the help
00:40 : of a cup of NPM modules we'll introduce
00:44 : them as we go and we'll be dealing with
00:47 : some markdown I markdown is in short a
00:51 : shorthand for HTML so you can read text
00:56 : like this and it'll generate the cross
00:59 : bonding HTML for you you might have been
01:04 : familiar with it if you ever written
01:07 : readme files on github for example so
01:11 : without further ado let's get into it so
01:14 : WebKit starts off setting up just note
01:17 : this project by making an git ignore
01:20 : file which prevents the note modules
01:23 : folder from getting checked into source
01:25 : control that's always a good thing to do
01:27 : then he uses the npm in come in with a -
01:32 : why to generate a new package JSON file
01:38 : so that that data can be in that way for
01:41 : you to do that without having to type up
01:43 : just file yourself this is it contains
01:48 : metadata about this nutrias project ok
01:53 : so he's gonna write some code that does
01:58 : stuff with the file system first we're
02:02 : gonna need a text file to read so we
02:06 : have a hollow dot text and then we'll
02:10 : read this file system
02:12 : a file system that read file to read in
02:16 : the spell but I see a typo here so if
02:19 : you run this we got FS start with file
02:22 : it's not fun on this just because the F
02:25 : is supposed to be capitalized so we
02:28 : fixed that and we run the command again
02:31 : and we'll get this buffer object so this
02:33 : buffer object is the parameter to of
02:36 : this callback function there's also a
02:38 : parameter of one which is the error
02:41 : object we'll see that later
02:42 : what are you supposed to do with this
02:44 : buffer object here a buffer object
02:47 : represents a bunch of data if we want to
02:50 : see the string that data represents we
02:53 : can just do a two string on it you can
02:56 : also alternatively just concatenate it
02:58 : with any string and I will use the empty
03:01 : string and that will work just as well
03:05 : now what if the file didn't exist we
03:08 : type hold the name of the file well if
03:13 : that happened we would not get a buffer
03:16 : object so this error message is saying I
03:18 : cannot read property to string of
03:20 : undefined saying the thing to the left
03:22 : of this dot here the buffer is undefined
03:26 : what gives well the way that JavaScript
03:30 : or nodejs I should say communicates that
03:34 : there is a problem is by giving you this
03:37 : error object and if we print out this
03:39 : error object we'll see this there's some
03:44 : information there the error object also
03:46 : has a dot message property and if we
03:50 : print it that out oops if we pointed
03:55 : that out it is say you go print out the
03:59 : error message in this case it says no
04:01 : such file or directory we're trying to
04:04 : open this hello TX so if you have that
04:10 : if you have experience with nodejs then
04:13 : it was probably preached to you that
04:15 : whenever you do an i/o operation like
04:18 : this you should always check for the
04:20 : possible existence of
04:22 : error object and you should do something
04:24 : like this just ignore those console
04:31 : messages for now so you should do
04:33 : something like this so if there's an
04:35 : error then you might want to handle it
04:39 : maybe by printing out appropriate
04:41 : message to the user or doing something
04:43 : else and then if there is no error then
04:46 : you can do your normal course of action
04:49 : now initially you could also do
04:51 : something like alternatively you could
04:55 : do something like to an early return and
04:58 : then then you don't have to write this
05:01 : else statement here and you might prefer
05:04 : that code because that requires one less
05:07 : level of indentation for this line where
05:10 : you would write code for the normal
05:12 : course of action okay now now we're
05:15 : gonna do something a little more bit
05:17 : more complex okay so all right so we're
05:24 : gonna install the markdown it module
05:27 : from NPM the markdown lit module is a
05:31 : module that will take markdown code that
05:34 : looks like this or or looks like this
05:36 : and then if you tell it to markdown or
05:40 : if you tell to render it's gonna
05:42 : generate some HTML code for you so the
05:45 : plan is we're gonna make a file that has
05:50 : marked down in there we just changed
05:53 : that hello dot txt to hello dot markdown
05:56 : and wrote some markdown code in here so
05:58 : this is gonna end up being an h1 tag in
06:03 : HTML and the word inside the Stars
06:06 : that's and I'm gonna become an EM tag
06:09 : and this guy is gonna end up being a
06:11 : paragraph okay so now we'll change this
06:17 : code to read from the MD file and then
06:20 : if we were able to correctly read the
06:24 : file then we'll we'll use this markdown
06:27 : at module to convert the code from the
06:32 : buffer which is the markdown
06:35 : code it's gonna convert that using the
06:37 : render method yes we saw in the tutorial
06:40 : example and give us some HTML code and
06:43 : once we have the HTML code at hand we're
06:46 : gonna write that out to an HTML file
06:49 : let's do that so now with the right file
06:59 : API call we also have to handle errors
07:02 : because right file could also
07:04 : potentially fail due to various reasons
07:07 : one might be the location you're trying
07:09 : to write the file to it doesn't exist so
07:12 : you also should if you were a good
07:16 : citizen handle errors coming from a
07:19 : right file operation so let's see that
07:23 : and we have a problem here because Wieck
07:27 : had forgot to put this generator HTML
07:30 : into the right file call so he fixes
07:33 : that I know that should work so that
07:36 : generated the HTML file
07:38 : hello the HTML and it looks like this
07:42 : based on this markup code here so that's
07:48 : pretty cool but you can see this code
07:51 : the the amount of nesting that this code
07:53 : has is already getting to be to be
07:57 : fairly a lot and this code is starting
08:02 : to get unwieldy and if we do something
08:07 : even more so let's say we're gonna we're
08:12 : gonna have a HTML template that this
08:15 : HTML is going going going to go into so
08:19 : the template will have a doctype in HTML
08:22 : and the body tags etc so let's go ahead
08:25 : and do that
08:31 : and this is what he came up with so we
08:34 : have an HTML template now which has
08:37 : these sections in all caps these words
08:42 : in all caps which are meant to be
08:44 : replaced and here is reading in the
08:48 : template file and then replacing those
08:51 : words that the title and the content
08:54 : with with the desired replacement so so
09:03 : now the HTML to generate a HTML file
09:06 : looks like this there's a little bit of
09:08 : indentation problem but that doesn't
09:10 : matter we're not gonna fix it this code
09:14 : as you can see now is getting fairly
09:18 : hard to deal with
09:20 : we're basically approaching callback
09:23 : hell and async/await
09:26 : is a solution to this problem so let's
09:30 : see what if we wrote the same code the
09:35 : exact same functionality using
09:37 : async/await
09:37 : what would this code look like let's do
09:41 : that so first we're gonna install the MZ
09:46 : the MZ library so the MZ library the tag
09:52 : name for it is modernising nodejs and it
09:56 : basically puts a wrapper around all of
09:59 : the standard libraries that no GS has
10:02 : out of the box such as the filesystem
10:04 : module but in it'll wrap it around give
10:08 : you a wrapper around the filesystem
10:10 : module and give all of the api's that
10:13 : the filesystem module has to you but
10:17 : except give them to you as promised if
10:21 : I'd API so that whatever you use whether
10:25 : it's read file or write file
10:27 : retha or where's rightful refile or
10:30 : write file or FS exists all those API
10:35 : calls will give you promises and if you
10:37 : remember a promise object is what we
10:39 : need to work with async await so okay
10:44 : so now that we have MZ we can use em z
10:48 : /f s instead of the FS module and then
10:54 : the first thing you do when you're doing
10:56 : a sync away is you make an async
10:58 : function so you can write your await
11:00 : statements okay
11:02 : so now if you write read file FS dot
11:08 : read file that's gonna give you a
11:09 : promise object and because it's a
11:13 : promise object you can await it now
11:17 : so if you print out this code you also
11:21 : get a buffer object so what do you do
11:24 : with a buffer object you do a to string
11:28 : on it like so so because this guy is a
11:31 : buffer object you do a to string now you
11:33 : get the mark-up code and we're gonna do
11:36 : a similar thing to get the template HTML
11:38 : and then we're just gonna take steal the
11:42 : mark-up rendering code and the template
11:47 : replacement code steal it from the other
11:50 : script and put it in here and then
11:52 : finally we're gonna do a file system
11:55 : that write file and a weight on that and
11:58 : this is basically the equivalent code to
12:03 : to this piece of code and as you can see
12:08 : there's just a lot less code here this
12:12 : is much more condensed and easy to read
12:16 : it there's less nesting to this code so
12:20 : reading it from the top to bottom is
12:24 : very very straightforward now where did
12:28 : all the code go well a lot of it had to
12:31 : do with this error handling code so why
12:35 : is it that in the async await version we
12:38 : don't need error handling
12:39 : well error handling does need to come
12:41 : into the picture so so if we printed out
12:48 : this success message here if there were
12:51 : an error any in any of these statements
12:55 : say
12:56 : there's a there's a file the file it
13:01 : doesn't exist here in the first
13:03 : operation then everything would error
13:06 : out and the rest of the statements would
13:10 : get skipped so the way you would handle
13:13 : this is by using a catch statement here
13:20 : on the return value of this main
13:24 : function because little did you know
13:26 : that all async functions return a
13:29 : promise so the return value of this main
13:35 : function when you call it is actually a
13:37 : promise so and as you know with a
13:41 : promise well if if you if you were
13:43 : familiar with promises you would know
13:45 : that a promise has a catch method which
13:48 : will allow you to handle an error coming
13:51 : from the promise so you could do
13:53 : something like this I could just chain
13:55 : it like this and and just one line here
13:59 : is sufficient to handle any of the
14:02 : errors coming from any of these
14:05 : statements as opposed to having a
14:08 : separate error handling statement for
14:11 : each one so that is this is the end of
14:18 : this code session I want to stop it here
14:21 : least this video goes too long waken and
14:25 : I will team up again to bring you more
14:28 : async/await content as well as some
14:31 : other content as well so I hope you -
14:34 : see you in the future thank you for
14:35 : watching