What is Axios?

  • Axios is a library in ReactJS which enables users to make http requests to external resources.
  • It is used to make requests to an API, return data from the API and then use that data in the React applications.
  • It deals with responses using Promises, so it's streamlined and easy to use in our code.

Why do we need Axios?

While dealing with different React applications, we often need to request and retrieve data from external APIs so that it can be used in the web application. One way to achieve this functionality is to use the Javascript Fetch API. Though Fetch is capable of retrieving external data, it has certain limitations.

A more popular way of achieving this functionality is to use the Axios library. Axios is particularly designed to handle http requests and responses.

Some of the features that make Axios more popular than Fetch are:

1. Axios transforms JSON data automatically.

2. It allows cancelling request and request timeout.

3. It can intercept HTTP requests.

4. It has built-in XSRF protection.

5. It also supports older browsers.

6.    It has a very clean and precise syntax.

How to install Axios?

Prerequisites

In order to install Axios, the following must be present:

1.    Node must be installed in the system (v 10.7 or above).

2.    A React Project Setup must be available with create-react-app or any other React Boilerplate.

Installation

In order to use the features of Axios, we need to install Axios. It does not come as a native JavaScript API, so therefore we need to manually import Axios into our project.

There are many ways to add Axios into the React Application. The following are the two major methods :

Using npm –

$ npm install axios

Using yarn –

$ yarn add axios

Bower package Manager –

$ bower install axios

Requesting Data with Axios

Web Applications use HTTP requests, for example, GET, POST, PUT and DELETE to communicate with APIs. Using Axios it is much easy to perform these commands.

Let us understand how to use the Axios to make REST API calls like GET, POST, PUT and DELETE in React App:

Performing GET Request with Axios

Making an HTTP request very easy using Axios. We can make a GET request using Axios to get data from a given api-endpoint.

In order to perform an HTTP GET request in Axios, we have to call axios.get().

Making a GET request in Axios requires minimum one parameter: the URI of the service endpoint.

For a simple Axios GET request, the object must have a url property.

Let’s look at a simple Axios GET example:

// send a GET request

axios({

method: 'get',

url: 'API_URL'

});

// Or we can also use shorthand method

axios.get('API_URL');

// Handling Response

axios.get('API_URL')

.then((response) => {

console.log(response.data);

}, (error) => {

console.log(error);

});

Performing POST Request with Axios

We can make a POST request using Axios to post data to a given endpoint and trigger events.

In order to perform an HTTP POST request in Axios, we have to call axios.post().

Making a POST request in Axios requires two parameters: the URI of the api endpoint and an object that contains the properties we wish to send to the server.

For a simple Axios POST request, the object must have a url property. If no method is given, GET will be used as the default value. Here is an example:

// send a POST request

axios({

method: 'post',

url: 'API_URL',

data: {

firstName: 'Smith',

lastName: 'Foundry'

}

});

// Or we can also use shorthand method

axios.post('API_URL', {

firstName: 'Smith',

lastName: 'Foundry'

});

// Handling Response

axios.post('API_URL', {

firstName: 'Smith',

lastName: 'Foundry'

})

.then((response) => {

console.log(response);

}, (error) => {

console.log(error);

});

Performing PUT Request with Axios

We can make a PUT request using Axios to put/update data at a given endpoint and trigger events.

In order to perform an HTTP PUT request in Axios, we have to call axios.put().

Making a PUT request in Axios requires two parameters: the URI of the api endpoint and an object that contains the properties you wish to update at the server.

For a simple Axios PUT request, the object must have a url property. If no method is given, GET will be used as the default value.

Here is an example:

// send a PUT request

axios({

method: 'put',

url: 'API_URL',

data: {

firstName: 'Smith',

lastName: 'Foundry'

}

});

// Or we can also use shorthand method

axios.put('API_URL', {

firstName: 'Smith',

lastName: 'Foundry'

});

// Handling Response

axios.put('API_URL', {

firstName: 'Smith',

lastName: 'Foundry'

})

.then((response) => {

console.log(response);

}, (error) => {

console.log(error);

});

Performing DELETE Request with Axios

We can make a DELETE request using Axios to delete data at a given endpoint.

In order to perform an HTTP DELETE request in Axios, we have to call axios.delete().

Making a DELETE request in Axios requires two parameters: the URI of the api endpoint and data which is required to trigger delete property at the server.

For a simple Axios DELETE request, the object must have a url property.

Here is an example:

// send a DELETE request

axios({

method: 'delete',

url: 'API_URL',

data: 'foo'

});

// Or we can also use shorthand method axios.delete('API_URL/${this.state.anyData}');

// Handling Response

axios.delete('API_URL/${this.state.anyData}')

.then((response) => {

console.log(response);

}, (error) => {

console.log(error);

});

Summary

  • In this article, we learnt about Axios library and its various features that makes it popular and easy to use.
  • We also understood why Axios is better than Fetch API.
  • We saw several practical examples to understand the usage of Axios inside a React application to create HTTP requests and handle responses.
  • We learnt how to make HTTP GET, POST, PUT and DELETE requests using Axios.