What is Axios in React? and Its Uses [ OverView ]

Last updated on 28th Oct 2022, Artciles, Blog

E-mail this post

(5.0) | 18574 Ratings 2134

In this article you will learn:

1. What is Axios? (A little bit of history).

2. Why Do We Need Axios in React?

3. Fetching and Consuming Data with a Axios (GET-POST-DELETE).

4. Performing POST Request with Axios.

5. Sending custom headers with Axios.

6. Features of a Axios Library as per the Documentation.

7. Conclusion.

What is Axios?

Axios is used to communicate with a backend and it also supports a Promise API that is native to a JS ES6.
It is a library which is used to make a requests to an API, return data from an API, and then do things with that data in a React application.
Axios is the very popular (over 78k stars on Github) HTTP client, which allows us to make a HTTP requests from a browser.

Why Do Need a Axios in React?

Axios allows us to communicate with an APIs easily in the React apps. Though this can also be achieved by the other methods like fetch or AJAX, Axios can offer a little more functionality that goes a long way with the applications that use React. So, while React doesn’t care about a DOM manipulation at all, why do need jQuery for a React app? Since React is handling each and everything within its own virtual DOM, perhaps and don’t need jQuery at all. And hence, Axios becomes the lighter-weight/optimized solution to play around with the HTTP requests. Using FETCH API:

const getPostsData = () => {
fetch(‘https://jsonplaceholder.typicode.com/posts’)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
}
}
getPostsData();

Using AXIOS:

const getPostsData = () => {
axios
.get(“https://jsonplaceholder.typicode.com/posts”)
.then(data => console.log(data.data))
.catch(error => console.log(error));
};
getPostsData();

There isn’t a very big difference but if consider a POST or Delete or PUT request can start observing a benefits of using the Axios.

Prerequisites:

In order to use a Axios with React need the following:

Install Node (v 10.7 or above). And if it is be already installed, check version by using npm -v.
A React project setup with a Create React App or any React boilerplate .

Installing Axios :

In order to use an Axios with React, need to install the Axios. It does not come as native JavaScript API, so that’s why have to manually import into the project.
There are more ways to install Axios.and can pick any of them based on the system environment.
Open up new terminal window, move to the project’s root directory, and run any of following commands to add Axios to the project.

Using npm:

$ npm install axios

Using a bower package manager:

$ bower install axios

Using a yarn:

$ yarn add axios

Fetching and Consuming Data with Axios (GET-POST-DELETE):

Web Applications use a HTTP requests, for example, GET, POST and PUT, to communicate with an APIs. Axios makes a life simple as it is simple for us now to perform these commands.
Performing a GET Request with Axios .
Let’s create new component named a My List and hook it into a component DidMount lifecycle as shown below. After that will fetch data with Get request by an importing axios. Component named a MyList, have imported a Axios first. axios.get(–URL–) is used to get promise which will return a response object. The received data in a response.data is assigned to user’s object. Can also retrieve the other Information like status code and others received with a response.

Performing a POST Request with Axios:

Now let’s create the another component named AddUser for using a POST request which will add a user in user list. (a.ka. Adding data into database).
Have made a HTTP Post request to modify database, which is a user list and added a new user to a database.
Because initialized state, in handleChange() and have updated state when the API request returns a data successfully.
Performing a POST Request with Axios .
Finally, delete method. axios.delete is used to make Delete request to a server.
Axiox.delete accepts a two parameters: url and optional config.

Sending a custom headers with Axios:

Sending custom headers with an Axios is more simple and straightforward. It is done by passing the object containing the headers as a last argument. Looking at response object:

Data: It is a payload returned from server. By default, Axios expects JSON and will parse this back into the JavaScript object.

Status: It is basically a HTTP code returned from a server.

StatusText: it refers to a HTTP status message returned by a server.

Headers: It contains all headers sent back by a server.

Config: It has original request configuration.

Request: It is an actual XMLHttpRequest object .

Looking at error object:

Message: an error message text.

Response: response object (if received) as described in a previous section.

Request: the actual a XMLHttpRequest object (when running in a browser).

Config: an original request configuration.

Features of a Axios Library as per the Documentation:

Transform a request and response data .
Make HTTP requests from a Node.js .
Make XMLHttpRequests from a browser.
Client-side support for the protecting against XSRF.
Supports a Promise API .
Intercept a request and response.

Conclusion:

This article has helped understanding about Axios and its usage for a various features like fetching or retrieving a data and handling responses.
In this article, saw several practical examples to check a power of Axios inside a React application to create a HTTP requests and handle responses.
Also got an idea about why it is the better approach than normal fetch api.