Axios API for JavaScript: GET, POST, PUT and DELETE requests

hello and welcome to this video tutorial so in this video i'm going to be showing you how you can make http requests in javascript using the third-party library axios and i'll be showing you how you can make all types of http requests not just a get request but also post put and delete now the reason you might consider using axios is because it really simplifies the syntax you need to write to make a http request having said that it is promise based now if you already understand promises this is going to be very straightforward for you if you don't then you don't need to worry i will walk through the process now because axios is a third-party library to start using it in your project you either have to install it locally or you can use a cdn so you can put a cdn in the head of your script and you can go ahead and start using it but for completeness i'm going to install axios locally in this tutorial because this is probably how you would do it in production so the first thing you need to do is to create a new project folder somewhere on your system i've already created one on my desktop called axios example and inside here are just it's just an index.html file which is just boilerplate html file linked to script.js which is currently empty so the most common way to install axios locally is with npm so for that i'm going to need to open my terminal so now with the terminal open the first thing i want to do is set the directory to that of my new project folder so i can do that by typing cd and then i can drag and drop the folder into the terminal and that will give me the path now inside my project folder the first thing i want to do is to create a new node project now to do this you need to have node installed on your system you can check that by typing node and then the v flag and it will return the version of node you have installed if it returns that you don't have node installed then you need to head to the node website and install node so i would recommend downloading the stable version and then once you've done that return to the terminal now best practice is to create a new node project inside the folder so i'll do that now i type npm init and because this is just for testing i'll accept all the defaults by including the yes parameter that's going to answer yes to all of the questions that come up now i want to actually install axios in the project folder so i can do that typing npm install and i want to save it in the folder so i include the save flag followed by axios so that will install now it'll just take a few moments so that's installed now so if i take a look at the contents of my project folder now you will see there's a package.json file as a dependency axios is listed and there's a node modules folder here where axios is saved so it's in the axios folder and then all of the files i need to run it are there so the way that i can start actually using axios to make http requests now is in index.html before the link to my script i'm going to include another script and that's going to have a source linking to axios in the node modules folder so it's a bit of a long file path unfortunately so you need to go inside node modules and then inside node modules you access axios and then you want to access the dist folder and then inside there the axios min.js so with this script added you're going to be loading axios before script.js is executed meaning that you have access to axios in script.js now the way that you can access axios in script.js is under the variable name axios so to use axios to make http requests we're going to be using methods that are available on the object that's stored in this variable axios so let's start with a get request so to make a get request using axios you want to access the get method on the axios object and enter the endpoint as a string inside the get method now you can see up here it's predicted that i want to import the axios package but i've already done that with the script this is relevant for node require doesn't work in vanilla javascript on the front end so i'm going to delete that now for the get request i'm going to use a test api to do that so i can get back some real data so i'm using refres.in if i scroll down it will give me the different endpoints i can use so for a get request post put delete i'm going to make a get request and i want to get the list of users it's showing me how it's going to come through so it's going to be an array of objects with each of the users inside so the first thing i want to do to create the endpoint is to get the face url put that into my script and then the endpoint i want to reach for this get request is forward slash api forward slash users and i could include a page there if i want to as well so i'll make that exactly the same as it is in the example so i'm going to access page two now this is already going to make the get request but i still need to access the result so the way that you access the result of a promise is using then syntax and the result is available to you as a parameter in the function that you pass in so i'm going to be using arrow syntax here and so you can call this whatever you want it's going to be the result object and i just want to log that to the console so you can see that it worked and to handle an error for a promise you use the catch method and again place a function inside and the error object will be available to you as a parameter and i'm going to log that to the console in case there is an error i'm not expecting one but it's good practice to include a catch statement so let's see if that worked in the browser so i refresh and you can see we've got an object returned status code 200. if i take a look inside inside the data property i have the data and the data is an array of objects like it was in the example online and each of those objects contains the information about each user so the get request has been successful you have the data available to you and you can access it in javascript via this res object now something you might want to do from here is to create a handler function so you can handle the result there rather than inside all of this syntax it could get a bit messy so to do that you can create a new function with a parameter data and i'm just going to log data here from inside this handler function you could just call that function passing in the data to it so handle result passing in res now in the browser i'm getting the data object again but this time it's being logged from line seven so that is within the handle result function rather than within the then catch statements so that's one way you can get the result out of the then catch statements and into a result handler but for now i'm just going to go back to how it was before for this tutorial so i'll just log the result to the console again now to make a post request to a server axios makes that about as straightforward as it could be so you need to access the axios object again and the method you're looking for is post and then inside there you want to pass in the endpoint you want to post to so i know that the base url is this so i'm going to copy that in there and in the api documentation i'll check now what i need to do to make a valid post request so here's the post create request and the end point is api users so i'll enter that now and the information the api is expecting is a data object with the name and job of a new user and if that works it's going to send a 201 status code and it's also going to send back a data object mirroring the information that we entered with name and job as well as an id and a created app timestamp so in our post request we need to include an object like this one so the way you do that in axios is to create a second argument on the post method call and that should be an object and then you can just write in the data there so in this case i'm going to create a new user and the user is going to be called john and the job and set to developer now the response and error handling for a post request is exactly the same as before so i'm going to copy and paste that from the get request below here so then the then uncatch syntax is handling the response now i'm going to comment out this get request so that is not interfering with this post request we're making so let's see how that looks in the browser now if i refresh you see this is on line 11 that's our post request and inside the data property is the data mirrored back at us name john job developer and the id and the created at time stamp are there and we can see that the status code is 201 so that's worked just fine now if you want to make a put request over writing the data all you have to do in axios is exchange the post for a put so using the put method so i'll comment out the post request so we can see the put request in action now i need to just check the api documentation to see what it is expecting for a put request so put update i need to give a user number there so back here i'm going to say user number three and i'll enter some slightly different data this time so i'll say mark and i'll change the job to gardener now let's see the result of this in the browser so i'll refresh here status code 200 open it up and the data here is being mirrored back at us we've got the updated app timestamp so if we look back at the api documentation that is exactly the result we were expecting so name job and updated that no id this time probably because we're just updating the records so finally let's make a delete request using axios so you can probably guess what method i'm looking for on the axios object this time so it's delete but i still need to check the endpoint and everything so i'm going to have a look again at the api documentation for a delete request so i just need to include the user number so i won't get so much back in the response this time but i will get some information about whether it was successful or not so in this case i don't actually need to change the endpoint i'm going to delete user 3 but i don't need to send any data this time so i can delete this second argument object now if i save let's have a look at the result of this in the browser as you can see this time there's no data object but i know the user has been deleted from this 204 status code so this is how you can make all types of http requests using axios it is quite similar to fetch but the result handling syntax is slightly simpler than for fetch on the other hand you do have to import axios to your project so which one you want to use is up to you axios is definitely a very popular and also well supported option so that is it for this tutorial if you did find it useful please consider hitting the like button down below and if you'd like to see more content like this from us in the future don't forget to subscribe to the channel

Channel: OpenJavaScript

Views: 29,000

Keywords:

Id: 661GhwA3nYI

Length: 12min 14sec (734 seconds)

Published: Mon May 02 2022