Axios with React js

Hey readers, In this blog we will be deep diving into Axios in React, understand what is it and why we use it. If you are new to React, I would recommend you check out articles on codedamn related to React js, its fundamentals like props and state, and the workflow of components in React js.

Prerequisite:

1. Basic knowledge of npm or yarn
2. React js and creating React application
3. Fundamentals of HTML, CSS, and JavaScript (ES6)
4. Basic understanding of how to use terminal 

What is Axios in React js?

In React js, Axios is an HTTP client library that permits us to make requests to a server’s endpoint. It acts as a simple promise-based client of HTTP and provides libraries in a package with an extensible interface. For instance, this can be an external API on the application’s backend of the Node server and by making requests, certain operations are expected to be performed using API. For example, if a GET request is made, the data is expected to be displayed on the front end.

Why use Axios?

There is a number of libraries that can be used to make requests like getting and POST, then why use Axios?

Well, here are five reasons why developers should use Axios while making an HTTP request.

• Works well with JSON data, unlike fetch API in which the header needs to be set or converted request body into a JSON object.
• The function name in Axios matches with any HTTP methods. If GET method is to be performed then .get() method is used and for POST, .post() method is used.
• It reduces code size as only one .then() callback is required to access the request unlike the Fetch API
• It has a better error handling function and can throw errors in the range of 500 while in Fetch API, the developer has to figure out the error code and pass it to the function.
• Can be used in both client as well as server

Additionally, React Axios is light-weighted as it can be easily modified. It supports almost every framework and works well. The main intention of using Axios is because of the support request and response interception as well as the conversion of data into a JSON format and performing certain operations on it. The promise-based functionality takes advantage of JavaScript’s await and async functionalities and a readable asynchronous code.

How to use Axion

Now that we know why we should utilize it, let’s look at an example to better comprehend it. Make a folder, open the terminal and type the following command

npm install Axios

This command will install Axios in the applications folder of your project.

Now make a file named App.js and type the following code

import React from 'react'; 
import axios from 'axios'; 
export default class AnimalList extends React.Component { 
state = { 
persons: [ ] 
} 
componentDidMount() { 
axios.get(`https://jsonholder.com/users`) 
.then(res => { 
const animals = res.data; 
this.setState({ animals }); 
}) 
} 

In this example, we have first imported React and Axios to use in the application component. After the component lifecycle is executed, the GET method is performed.

We used Axios.get URL which is a promise and returns an object. Inside this request, the data, request logs, and status code is returned.

Similarly, a POST request is performed. In this the events get triggered at the endpoint and HTTP POST is performed using Axios.post() function in which two parameters are passed, endpoint URL service.

The object will contain the same properties as the one which is to be sent to the server. If no POST method exists, the GET request is carried out. Let us understand this by the following code.

axios({ 
method: 'post', 
url: '/login', 
data: { 
firstName: 'Codedamn', 
lastName: 'Community' 
} 
}); 

The above code snippet is similar to that of jQuery’s AJAX function. The code sends a POST request to log in with the value of an object which is then processed into React’s component onto the request body.

Conclusion

This was all about the Axios in React js. We have discussed how to use it and when to use it. What are some points to consider in order to start with Axios in your project. If you’re interested in studying React js, codedamn offers classes with a built-in environment playground where you can learn and practice code.

Join the codedamn community, read other programming and development articles on the site, and sign up for our newsletter to be informed about new programs and upgrades. Please let us know if you have any questions or suggestions in the comments section. Also, if you sign up for codedamn, don’t forget to check out the referral section, copy your link, and refer as many people as possible to earn fantastic gifts, merchandise, and prizes from codedamn.