Mastering ReactJS: Understanding Hooks, Components, and Libraries
Understanding Axios in ReactJS
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.
Features that make Axios more popular than Fetch
1. Axios transforms JSON data automatically.
2. It allows cancelling requests 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 a minimum of 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',
last Name: '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',
last Name: 'Foundry'
}
});
// Or we can also use shorthand method
axios.put('API_URL', {
firstName: 'Smith',
last Name: 'Foundry'
});
// Handling Response
axios.put('API_URL', {
firstName: 'Smith',
last Name: '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 make 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.
To learn more about ReactJS and full-stack web development, enrol in Board Infinity's Full Stack Development Course and get personalized mentoring from top industry experts. Gain expertise in full-stack development and become a certified web developer!