SachinSMahajan

Posted on Oct 31, 2020

Use Axios with React

#javascript #react #axios #http

API Call in React Using Axios.

Introduction

Most of the Web and Mobile apps need to communicate with server or external services to get and store data. This can be done by calling API. These apps use HTTP requests to communicate with APIs.

In react APIs can be consumed in various ways in which AXIOS and Fetch API are most popular.

In this article, we will discuss and implement Axios to access Dummy Rest API in a React application.

What is Axios?

Axios is a promise based lightweight HTTP client for browser and node.js.

Features at a glance

Make XMLHttpRequests from browser

This gives the ability to a web page to update just a part of a page without disrupting other areas.

Make HTTP request from node.js

As Axios works with node applications you can consume a third-party API, also this is useful in SSR(Server side rendering) for web applications.

Promise based support

Promise-based API gives you the ability to write more readable asynchronous code by taking advantage of native async and await javascript features.

Request and response interception

Interceptors are basically functions that Axios calls for every request and response.

You can intercept a request to transform it before Axios sends it or transform a response before Axios returns it to the caller.

Efficient error handling

As Axios built on promises, it has then() function for promise chaining and .catch() function for error handling.

You can also use response interceptors to handle errors. Response interceptor function takes two parameters, successHandler and errorHandler. You can write your own error handler to transform errors as you want.

Protection against CSRF

Axios supports token-based support to prevent CSRF.

Request cancellation support

Suppose we need to cancel the request when the user navigates from the current page to another after making an API call, then this can be done in Axios by using the cancellation token.

Automatic transformation for JSON data

Let's take a quick look at the basic usage of Axios

Using Axios to make HTTP requests is very easy.

Perform GET request

axios({
     method: 'get',
     url: 'https:/reqres.in/api/users?page=2'
})

Perform POST request

axios({

method: 'post',
      url: 'https:/reqres.in/api/register',
      data: {
            email: 'test@example.com',
            password: abc123
      }
})

Above requests can also be made with inbuilt alias methods as

axios.get('https:/reqres.in/api/users?page=2')

axios.post('https:/reqres.in/api/register',{
            email: 'test@example.com',
            password: abc123
    }
)

Now let's consume Dummy Rest API in a React application

Installing Axios

To install Axios run the below command in terminal

Terminal:

npm install axios --save

After installing, we need to import Axios into our application.
In our application, we will display a user list.

To Import Axios in UserList component add below line in UserList.js file

import axios from 'axios'

Now it's time to call get API, to do this write the below function and call it from useEffect hook

function GetAllUSers() {
axios.get('https://reqres.in/api/users?page=2')
     .then(response => {
        console.log(response.data)
        const { data } = response.data
        SetUserData(data)
    }).catch(error => {
        console.log(error);
    })
}

In GetAllUsers, we are calling users API and requesting data for page no 2 and getting a response in then block. Then we are destructuring data from the response and setting it into a UserData state variable. The result will be rendered as below.

Now before making a Post request let’s take a look at how we can configure the base instance of Axios.

Create file api.js in the src folder.

Import Axios and add below code block.

export default axios.create({

baseURL: `https://reqres.in/` 

});

Here we are creating and exporting a new instance of Axios with baseURL.
Like baseURL we can also configure another Axios parameter like
Header, timeout, response type, and so on.

Now let's use the same base instance for making a POST request.
Add below import statement in UserList.js component

import baseInstance from '../api'

Use this base instance for adding User. Here you can see we have just specified only the endpoint to add a user.

    const AddUser = async (event) => {
        event.preventDefault();
        await baseInstance.post('api/users', {
            name: UserName,
            job: UserRole
        }).then(res => {
            alert(`Data saved successfully. 
                ID = ${res.data.id}
                First name = ${res.data.name}
                Role = ${res.data.job}
                Created At = ${res.data.createdAt}`
            )
            console.log(res.data);
        }).catch(error => {
            console.log(error);
        });
    }