React axios

Overview

In ReactJS, Axios is a library that serves to create HTTP requests that are present externally. It is evident from the fact that we may sometimes in React applications need to get data from the external source. It is quite difficult to fetch such data so that they can be normally shown on the website. Thus, it helps in retrieving the data thereby adding it to the state to facilitate the application whenever the requirement arises.

Additionally, react Axios is very easy to modify and is quite lightweight. It also works great with many other frameworks present today. The main purpose of using Axios is to get support for request and response interception, conversion of data into JSON format, and transform it. It also helps you in protecting XSRF forgery by default while you request cross-site access.

Axios is promise-based, which gives you the ability to take advantage of JavaScript's async and await for more readable asynchronous code.

It lets you make use of asynchronous readable code present in Javascript. It can be easily used to cancel or intercept requests with the help of the in-built feature of client-side protection of forgery across the cross-site request.

Here, you will learn the uses of Axios with JSON and API integration along with other applications in React.

Prerequisites

Let's consider some prerequisites before proceeding.

Familiar with yarn or node npm package module.
Create react app tool pre-installed.
Basic knowledge of HTML/CSS and Javascript(ES6).
Basic understanding of command-line terminal.

Open the terminal of your system and type the below commands as shown.

Then, you'll need to run this command to install Axios.

This command will install axios into your directory. You can now carry out certain activities associated with the Axios library.

Getting GET request with Axios

To create a GET request into your project, type the following command below.

Here app.js is a sample file for your react code. After this, you can easily import the components of Axios, as shown below:

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 });
      })
  }

First, you need to import the React and Axios so that both can be used in the component. Further you require looking into the componentDidMount lifecycle hook and performing a GET request.

In the above code, we have first imported React and Axios components to get all the features into our code. You can then hook the componentDidMount() function for the lifecycle management to create a GET request. We have used axios.get URL, which will collectively get a promise to return an object. Inside this generated request you might get the data that is assigned. You can also get the status code and request logs under the res.request and res.status paradigm.

Getting POST request with Axios

Getting an HTTP request is quite an easy task just like the object config is passed to the Axios function. You can easily make such POST requests and trigger events with the help of given endpoints. Therefore, to perform an HTTP POST request in Axios, you will need to call the axios.post() function followed by passing two parameters i.e. the URI of the endpoint service.

These objects contain the same properties you want to send to the server. Hence, to create a simple POST request through Axios, the object must possess the property of URL. If no such method exists, the GET request value will be carried forward for the process. Take a look at a simple POST request example.

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

The above Axios snippet looks familiar to that of JQuery's Ajax function. This snippet orders Axios to send a POST request to log in with object values or keys and the axios will convert this piece of code in the JSON format. Later, this JSON converted data is passed onto the request body which is further processed into the components you have included in your react.

Next TopicSpeed of Light

← prev next →