Coding

Sending JavaScript Http Requests with Axios

  • 00:00:00 this is a video which belongs to a short
  • 00:00:02 mini series of free videos where I have
  • 00:00:05 a look at common options when it comes
  • 00:00:08 to sending HTTP requests from your
  • 00:00:10 front-end JavaScript application to a
  • 00:00:13 back-end in the first two parts we had a
  • 00:00:15 look at XML HTTP request and the fetch
  • 00:00:18 API definitely check out these videos if
  • 00:00:21 you haven't already you find links below
  • 00:00:22 the video in this video I'll introduce
  • 00:00:25 you to Axios a third-party library which
  • 00:00:28 actually wraps the XML HTTP request but
  • 00:00:32 which makes working with it much much
  • 00:00:34 easier and which in general makes
  • 00:00:36 sending HTTP requests really a breeze as
  • 00:00:39 you will see in this video
  • 00:00:44 so now after the fetch API and xml
  • 00:00:47 httprequest
  • 00:00:48 let's have a look at Axios now access is
  • 00:00:51 a third-party library a JavaScript
  • 00:00:53 library which we can use in any
  • 00:00:54 JavaScript project and it uses promises
  • 00:00:58 and nonetheless builds up on XML HTTP
  • 00:01:01 requests so it basically does what we
  • 00:01:03 manually did here in the first video
  • 00:01:05 where we wrapped XML HTTP requests and
  • 00:01:08 promised a fight it but of course the
  • 00:01:10 access library does is in a more
  • 00:01:12 sophisticated way offering us way more
  • 00:01:14 features and benefits it also has great
  • 00:01:17 browser support as you see because it
  • 00:01:19 uses XML HTTP requests under the hood
  • 00:01:22 and it's really easy to use now well not
  • 00:01:25 npm install it here because it don't
  • 00:01:27 have an NPM project we have a very
  • 00:01:28 simple project here we can just include
  • 00:01:30 it from a CDN by copying that link here
  • 00:01:33 and then we want to include it here
  • 00:01:36 above our own script that strip should
  • 00:01:40 also be fetched to access j/s now so
  • 00:01:43 that we use this script where we can
  • 00:01:45 write our exes logic so where's this
  • 00:01:47 import added and this import changed
  • 00:01:50 we're ready to write some code that uses
  • 00:01:52 the exes package now in case you missed
  • 00:01:54 the last two videos definitely check
  • 00:01:56 them out because there you'll learn the
  • 00:01:58 important fundamentals of all of that in
  • 00:02:00 this video just like in the last videos
  • 00:02:02 I'll use this request dummy API here to
  • 00:02:05 get a list of users and to also send a
  • 00:02:08 post request to fake registration now
  • 00:02:11 it's a fake API no real data is
  • 00:02:13 exchanged data you send to the server
  • 00:02:16 also isn't stored there but it's a great
  • 00:02:18 API for playing around with HTTP
  • 00:02:21 requests and experimenting with these
  • 00:02:23 features so let's start by sending a get
  • 00:02:26 request with the help of Axios because
  • 00:02:30 i'm importing it with a CDN here we have
  • 00:02:32 a globally available Axios object now I
  • 00:02:36 can just access it like this of course
  • 00:02:38 you find a full documentation on the
  • 00:02:40 official get up page and we can send a
  • 00:02:43 get request by calling the get method on
  • 00:02:46 access
  • 00:02:47 now this get method takes the URL to
  • 00:02:51 which you want to send a get request and
  • 00:02:53 then it returns a promise where you can
  • 00:02:55 listen to this
  • 00:02:57 case and to fail your case now the URL
  • 00:03:01 is the same URL I used in the other
  • 00:03:02 videos this is my get URL so I'll copy
  • 00:03:06 that
  • 00:03:06 and now just send my request to that URL
  • 00:03:09 now no additional configuration is
  • 00:03:12 required here though if you want to
  • 00:03:14 additionally configure the request you
  • 00:03:16 could absolutely do that you can pass in
  • 00:03:18 a second argument which is a JavaScript
  • 00:03:20 object that it takes certain options
  • 00:03:23 which you find described in detail on
  • 00:03:24 the official Docs of course where you
  • 00:03:26 can find you in the request to your
  • 00:03:28 requirements here I'll just send it like
  • 00:03:31 this though and now in the then block
  • 00:03:34 here we can work with the response and
  • 00:03:37 actually here let's see what we get
  • 00:03:40 let's console.log response here and save
  • 00:03:45 that and now reload our little
  • 00:03:47 application here and click get data now
  • 00:03:51 what you see is we get this object this
  • 00:03:53 object holds some information about the
  • 00:03:55 response for example the status code
  • 00:03:57 information about the request which was
  • 00:03:59 sent the headers that were part of the
  • 00:04:02 response and all the very important of
  • 00:04:04 course the data now unlike with the
  • 00:04:07 fetch API data is no streamed data which
  • 00:04:11 we manually have to converge to a
  • 00:04:12 snapshot like we did it here instead
  • 00:04:15 it's already the parsed and converted
  • 00:04:18 object it's no json data which we have
  • 00:04:20 to parse manually it's no stream data
  • 00:04:22 which we have to turn into a snapshot
  • 00:04:24 it's normal JavaScript data a JavaScript
  • 00:04:28 object we can work with so that's pretty
  • 00:04:30 convenient with axis we already got
  • 00:04:32 everything we need in this ven block and
  • 00:04:35 therefore sending the cat request is
  • 00:04:37 already done at this point now let's do
  • 00:04:41 the same for posting data again we can
  • 00:04:44 use access and now the post method there
  • 00:04:47 now previously in the other Tube videos
  • 00:04:50 I created utility functions send HTTP
  • 00:04:53 requests which would wrap the fetch API
  • 00:04:55 or XML HTTP request I did this to avoid
  • 00:05:00 code duplication with axis we don't
  • 00:05:03 really need that because axis already is
  • 00:05:05 the utility function or the utility
  • 00:05:08 object we're utilizing
  • 00:05:10 so there's little we could gain by
  • 00:05:12 wrapping this and yet Navarrete ility
  • 00:05:14 function instead we already are using
  • 00:05:16 get here which is pre-configured for gat
  • 00:05:18 requests and post here which is
  • 00:05:20 pre-configured for post requests now the
  • 00:05:23 post method also takes a URL twitch you
  • 00:05:26 want to send the request and here I want
  • 00:05:29 to send a request to this register API
  • 00:05:32 here so it's slash register at the end
  • 00:05:35 it's instead of slash users and of
  • 00:05:38 course now I also want to append data
  • 00:05:41 now Forex is on a post request to append
  • 00:05:44 a that we simply pass in a second
  • 00:05:46 argument this second argument is a
  • 00:05:49 JavaScript object which will
  • 00:05:51 automatically be converted to JSON data
  • 00:05:53 by axis so by the library and which will
  • 00:05:56 then be appended to the outgoing post
  • 00:05:58 request so therefore here I want to
  • 00:06:01 append a JavaScript object and now it's
  • 00:06:03 important that you append the right data
  • 00:06:05 for this dummy API otherwise the dummy
  • 00:06:07 API will give you an error and that's
  • 00:06:09 the data you also found in the dummy API
  • 00:06:12 Docs here essentially it's this email
  • 00:06:15 password pair here so I wanna append
  • 00:06:18 that here however of course all
  • 00:06:20 converted to regular JavaScript object
  • 00:06:23 we don't need quotes around email and
  • 00:06:25 password and with dead we're sending a
  • 00:06:28 post request so let's check the response
  • 00:06:31 here and console.log response here to
  • 00:06:34 see whether that works if we save that
  • 00:06:37 and we go back to our page here reload
  • 00:06:40 it and post data that's looking good we
  • 00:06:43 got a 200 status code and data is indeed
  • 00:06:48 signaling that yeah it worked this is
  • 00:06:50 some dummy data the API returns for a
  • 00:06:52 pseudo successful user registration not
  • 00:06:56 really a registration because it's all
  • 00:06:58 just dummy API but it worked now one
  • 00:07:02 important note if we have a look at the
  • 00:07:04 network tab and we have a look at the
  • 00:07:06 outgoing request then we see that
  • 00:07:08 actually the content type application
  • 00:07:10 Jason header was automatically added by
  • 00:07:13 axis so what axis does is it analyzes
  • 00:07:16 the data you're appending and then does
  • 00:07:20 the right thing with it for a JavaScript
  • 00:07:23 object it can
  • 00:07:24 it's a to Jason and it also adds the
  • 00:07:26 right header if we would have passed
  • 00:07:28 different data here let's say just some
  • 00:07:31 text here and I try to send a request
  • 00:07:36 with that then I actually get back an
  • 00:07:40 error response but if we check the
  • 00:07:42 network tab and there the headers we see
  • 00:07:45 that the content type was set to
  • 00:07:48 something different and we didn't add
  • 00:07:50 JSON data but form data so Axius is
  • 00:07:53 really smart regarding the data you
  • 00:07:55 append and it analyzes the day that you
  • 00:07:57 append and then converts it correctly
  • 00:08:00 and sets the right headers for the
  • 00:08:02 outgoing requests so we don't need to
  • 00:08:05 configure the headers manually here of
  • 00:08:07 course you still could do that if you
  • 00:08:09 wanted to you can pass a third argument
  • 00:08:11 to post get and so on which is an object
  • 00:08:13 that allows you to configure the request
  • 00:08:16 and there you can add a headers key
  • 00:08:18 which just like in the case of the fetch
  • 00:08:20 API is an object where you can add your
  • 00:08:23 own headers like this year so you can
  • 00:08:27 override this default or add other
  • 00:08:29 headers that is absolutely possible as
  • 00:08:31 you see if I reload here if we inspect
  • 00:08:34 the outgoing request now it has my own
  • 00:08:36 content type header but of course for
  • 00:08:38 just the content type you don't really
  • 00:08:40 need that because access is pretty smart
  • 00:08:43 about that now what about errors that
  • 00:08:46 was a bit tricky with both the XML HTTP
  • 00:08:49 request but also especially with the
  • 00:08:51 fetch API where we needed this inner
  • 00:08:53 wrapped API promise chain here to
  • 00:08:57 properly handle errors and get the error
  • 00:09:00 response body how does this work for
  • 00:09:02 Axios let's say we're sending a request
  • 00:09:05 to register but we're omitting the
  • 00:09:08 password and therefore the API will
  • 00:09:10 throw an error now let's add a catch
  • 00:09:12 method here and catch any error we might
  • 00:09:15 be getting and let's then console lock
  • 00:09:18 that error to the console to see whether
  • 00:09:20 we make it into this block that was not
  • 00:09:23 the case with the fetch API for example
  • 00:09:24 there we always ended up in a success
  • 00:09:27 block by default and if we do make it in
  • 00:09:29 there let's see what's inside the error
  • 00:09:31 object or string or whatever we're
  • 00:09:33 getting so if we save that and we now
  • 00:09:36 post here
  • 00:09:39 we see we're getting back this output
  • 00:09:44 here now it's coming from line 28 in my
  • 00:09:46 script and that indeed is the right line
  • 00:09:50 that is my error handling block so an
  • 00:09:53 important takeaway is that X is
  • 00:09:55 automatically throws an error if the
  • 00:09:59 response has a error status code so it
  • 00:10:03 does not just throw errors if you have a
  • 00:10:05 technical error let's say connectivity
  • 00:10:07 issues but also if you have a
  • 00:10:09 technically successful response that has
  • 00:10:11 a 400 or 500 status code though and
  • 00:10:14 that's a major difference compared to
  • 00:10:17 the fetch API and xmlhttprequest there
  • 00:10:21 if we had a technically successful
  • 00:10:22 response which just had a error or a
  • 00:10:25 status code so a 400 dish or 500 ish
  • 00:10:28 status code we would always make it into
  • 00:10:31 the success handlers and then we
  • 00:10:33 manually had to check the status code
  • 00:10:35 there and make sure we throw an error
  • 00:10:37 maybe parse the error response and so on
  • 00:10:40 axis is different for error status codes
  • 00:10:43 it automatically float throws an error
  • 00:10:45 so that we automatically end up in our
  • 00:10:47 catch block here now to learn more about
  • 00:10:50 the air or response though and for
  • 00:10:53 example get its data we can access a
  • 00:10:56 response property on this error object
  • 00:10:59 and if we do it cell and post the data
  • 00:11:02 you see we get our normal response
  • 00:11:04 object with the response data which in
  • 00:11:07 this case holds the error description so
  • 00:11:09 that's useful for getting the body off
  • 00:11:12 the response even if it had a status
  • 00:11:14 code of 400 or 500 or whatever it is and
  • 00:11:18 that's therefore Axios now you can
  • 00:11:21 probably see that working with access is
  • 00:11:23 really straightforward which is why it
  • 00:11:26 is very popular and often used instead
  • 00:11:28 of XML HTTP request or a fetch actually
  • 00:11:33 I'd say XML HTTP request is rarely used
  • 00:11:36 like this because it requires a lot of
  • 00:11:39 overhead setup and here I'm just
  • 00:11:41 covering some basic cases we're not
  • 00:11:44 doing anything complicated here the
  • 00:11:46 fetch API is a bit more popular to be
  • 00:11:48 used just as it is but
  • 00:11:51 more complex your application gets the
  • 00:11:53 more important error handling is and so
  • 00:11:55 on
  • 00:11:56 the more inconvenient it can get to work
  • 00:11:59 with it and therefore axis is quite
  • 00:12:02 popular because there you almost get the
  • 00:12:04 best of both worlds
  • 00:12:05 you get a promise based API and still a
  • 00:12:08 lot of the heavy lifting is taken away
  • 00:12:10 from you you get convenience methods for
  • 00:12:13 sending get and post requests and error
  • 00:12:15 handling just works so therefore of
  • 00:12:18 course it's totally up to you to work
  • 00:12:19 with whatever you want or need in your
  • 00:12:22 projects but giving axis a chance or
  • 00:12:25 considering axis over the fetch API or
  • 00:12:28 xmlhttprequest might be worth it
  • 00:12:31 and that's it this was the last video in
  • 00:12:33 this short mini series of sending HTTP
  • 00:12:36 requests from a client-side JavaScript
  • 00:12:38 application to a server I hope it was
  • 00:12:41 helpful I hope you now have a basic
  • 00:12:43 understanding of the options you have
  • 00:12:45 how they compare and how they generally
  • 00:12:47 work of course you can always do way
  • 00:12:49 more with each option than what I showed
  • 00:12:52 you here this was just a basic
  • 00:12:53 introduction and comparison the
  • 00:12:56 documentation you'll find on pages like
  • 00:12:58 mdn or in the case of x yes the official
  • 00:13:00 access talks is of course a great place
  • 00:13:03 to dig deeper nonetheless this hopefully
  • 00:13:05 was helpful and helps you in your next
  • 00:13:07 project
  • 00:13:07 to choose the right option and most
  • 00:13:10 importantly to also use it successfully