How to Use Axios for HTTP Requests
Tags: javascript, programming, beginners, webdev
Published: 2023-01-12 00:10:37

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 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](https://nodejs.org/en/) 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_


![using the fetch api](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8prtrgazmtxdizwolzn.png)

_making a get request with the `Axios`_


![using the axios api](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l05i67balzz7bs6qpu7.png)

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](https://www.restapitutorial.com/lessons/httpmethods.html). 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.


![using the fetch aoi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlvzbzjj9j8i07ul9ba6.png)



![using the axios api](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jop4zcozfqyxwh3zbi6a.png)

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](https://twitter.com/Ksowahh) for more.