A beginners guide to using Axios with Reactjs

Tech Bytes — Tue, 15 Nov 2022 12:41:35 +0000

In this article, we are going to learn how to use Axios for GET, POST, PUT and other HTTP requests in React.js application. I will use MongoDB, Node, and Express.js to create a backend server for the React app.

In the React environment we have plenty of options for pretty much everything. For the network also we have plenty of options like fetch ,axios , react-http-client , etc.

Among others, the Axios provides plenty of features like global-config , Interceptors , better error handlers, etc.

What is Axios?

Axios is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node.js. We can use Axios with React to make requests to an API, return data from the API, and then do things with that data in our React app.

With Axios, A developer can also take advantage of async/await for more readable asynchronous code.

Here we will use JSON placeholder API for fetching the list of dummy users.

Install Axios

At first, we need to install Axios into the react project. Run below command to install it in the project.

// install with npm npm install axios — save

GET Request with Axios

Create a new component named UserList and hook it into the componentDidMount lifecycle and fetch data with Get request after importing axios

import React from 'react';
import axios from 'axios';
export default class UserList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const users = res.data;
this.setState({ users });
})
}
render() {
return (
<ul>
{ this.state.users.map(user => <li>{user.name}</li>)}
</ul>
)
}
}

In the above code, At the top React & Axios library is imported. axios.get(URL) is used to get a promise which returns a response object. The received data in res.data is assigned to users. Information like status code and others can also be received with the response.

POST Request with Axios

As we know that Axios also handle another HTTP request such as POST, PUT, etc. So create another component named AddUser for showing an example of POST request which will add a user and put below code inside it.

import React from ‘react’;
import axios from ‘axios’;

export default class AddUser extends React.Component {
 state = {
 name: ‘’,
 }

 handleChange = event => {
 this.setState({ name: event.target.value });
 }

 handleSubmit = event => {
 event.preventDefault();

 const user = {
 name: this.state.name
 };

 axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
 .then(res => {
 console.log(res);
 console.log(res.data);
 })
 }

 render() {
 return (
 <div>
 <form onSubmit={this.handleSubmit}>
 <label>
 Person Name:
 <input type=”text” name=”name” onChange={this.handleChange} />
 </label>
 <button type=”submit”>Add</button>
 </form>
 </div>
 )
 }
}

The above code mainly makes an HTTP POST request to the server and add the data to the database.

DELETE Request with Axios

axios.delete is used to make Delete request to the server, URL need to pass into it as a parameter.

handleSubmit = event => {
 event.preventDefault();

 axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
 .then(res => {
 console.log(res);
 console.log(res.data);
 })
}

Error handling

In the real world, every application uses some common rule like “If the response header contains 401 then redirects to the login page, etc”. For that, we need to handle the application level.

import Axios from "axios";
import utils from "./utils";



Axios.interceptors.response.use(undefined, function (error) {
    // Error Status code
    const statusCode = error.response ? error.response.status : null;

    // We show the console error only in the development mode.
    if(process.env.NODE_ENV === 'development'){
        console.log('error', error);
        console.log('errorType', typeof error);
        console.log('error', Object.assign({}, error));
        console.log('getOwnPropertyNames', Object.getOwnPropertyNames(error));
        console.log('stackProperty', Object.getOwnPropertyDescriptor(error, 'stack'));
        console.log('messageProperty', Object.getOwnPropertyDescriptor(error, 'message'));
        console.log('stackEnumerable', error.propertyIsEnumerable('stack'));
        console.log('messageEnumerable', error.propertyIsEnumerable('message'));
    }
    // If the un-auth error, we should redirect to login page.
    if(statusCode === 401){
        utils.redirectTo("/login");
    }
    // for the both development & production, we need to show the alert.
    utils.error("An Error in the server");

    // return promise object
    return Promise.reject(error);
});

The above code is the simplest usage of Axios-interceptors for the global error handler but in the real world, an application needs to handle a lot in both production and development modes.