Hello readers, and welcome to another blog post where I attempt to explain a technical concept used in the software development world. I make an effort to accomplish this by giving clear examples and demystifying a few ideas. This blog will primarily discuss Axios, my go-to HTTP request tool.
What is Axios?
Simply put, Axios is a well-known JavaScript library that enables HTTP requests to GraphQL or RESTful APIs. Axios performs the same function as the fetch API. Promises are used in the background of Axios. Please click here to get more information about Promises.
Requirements For Using Axios
You must first have Node.js installed on your PC before using Axios. Please click on this link if you don't have Node.js installed . You can access the official Node.js website by clicking this link, which lists the instructions for installing Node.
Axios must then be added to your project. Simply enter the following command in your terminal to achieve this (always ensure you are in the right directory):
npm install axios
The following command will function for you if you're using yarn:
yarn add axios
Using Axios
I like using Axios over the fetch API mostly because it offers a very clear and accurate syntax. Here is a case study to help you understand my point.
making a get request with the fetch API below
making a get request with the Axios
In the above example, I'm using a GET request to get an object containing a name and age from the jsonkeeper api. With the help of the fetch api in the first image and Axios in the second, this can be accomplished. To utilize Axios, we first call the axios function, and then we call any of the Axios library's functions that correspond to the various HTTP verbs. In the example above, we are obviously sending a GET request using the get() method. The code on line 3 in the second image will yield a Promise because Axios uses Promises.
You immediately observed that the second image has one less then() method than the first. This is because, in contrast to the fetch api, Axios gives the data you want. The Axios library has a drawback in that it delivers an object that contains a key of data that corresponds to the data you were expecting. To obtain the object of name and age, we called res.data on line 4 of the second image.
You might be asking why the quantity of code doesn't differ significantly. That is accurate for GET requests, but you can start to appreciate the advantages of using Axios in the example that makes a POST request in the next section.
The difference in code density is very noticeable, and the code is also more accurate. Axios post() method requires a second argument during a POST request, and it must be an object. In this instance, we are passing an object, the constant student.
The remainder, stringifying our object and creating the headers, is then handled by Axios. These actions must be carried out manually when using the fetch api.
Hopefully this blog post have helped you better grasp how to use Axios to fetch data and persuaded you that it is a better option to the fetch api. Thank you for reading, and please give Axios a shot.
Thank You for reading. If you find this blog to be helpful, please like, share, and leave your thoughts in the comment section as well.
You can also follow me on Twitter for more.
Top comments (0)