How to use AXIOS with React? HTTP request in React

Share this Content

In this article, we will take a look at the basics of using Axios to make HTTP requests in JavaScript. We will also discuss how to use Axios with React, React Router, and Redux.

In the past, we would make XMLHttpRequest (XHR) requests to fetch data from a server. This involved a lot of boilerplate code and was difficult to use. With the fetch API, we can make Ajax requests in a simpler way.

However, the fetch API is not yet supported by all browsers. That’s where Axios comes in. Axios is a promise-based HTTP client that works in the browser and Node.js. It has a convenient and modern API simplifying asynchronous HTTP request and response handling.

What is Axios?

Axios is a promise-based HTTP client that works in the browser and Node.js. It has a convenient and modern API simplifying asynchronous HTTP request and response handling.

Axios is similar to the popular Promise-based library called Fetch. However, it has a few important differences. One of the most important differences is that Axios supports cancelling requests. This makes it ideal for use in situations where you need to cancel a request if another request is made.

Another difference is that Axios automatically converts JSON data into JavaScript objects. This makes it easier to work with the data.

Installing Axios

Axios can be installed using NPM or Yarn.

To install it using NPM, run the following command:

npm install axios

To install it using Yarn, run the following command:

yarn add axios

Axios With React:

Let’s take a look at a simple example of using Axios to make an HTTP request.

We will use the GitHub API to get a list of users.

  1. First, we need to create a file called index.js. Then, we need to import Axios.
  2. Next, we need to make a GET request to the GitHub API. We will use the axios.get() method.
  3. The axios.get() method takes two arguments. The first argument is the URL of the resource. The second argument is an options object.
  4. In the options object, we can specify the HTTP headers and other settings.
  5. We need to select the headers so that GitHub knows we are making a request from a client-side application.
  6. Next, we need to specify a callback function. This function will be called when the response is received.

The response object has a data property. This property contains the data received from the server.

In this example, we are only interested in the data property. However, the response object also has other properties that can be useful.

Finally, we need to catch any errors that occur. Errors can occur if the request fails or if the server returns an error.

The catch() method takes a callback function. This function will be called if an error occurs.

The error object has a message property. This property can be used to display an error message to the user.

Now, let’s take a look at the complete example.

import axios from 'axios';

axios.get('https://api.github.com/users', {
headers: {
'Accept': 'application/json'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error.message);
});

In this example, we are making a GET request to the GitHub API. We are asking for a list of users.

The response data is an array of objects. Each object contains information about a user.

Making POST requests

Axios can also be used to make POST requests.

To make a POST request, we need to use the axios.post() method.

The axios.post() method takes two arguments. The first argument is the URL of the resource. The second argument is the data to be sent to the server.

In the options object, we can specify the HTTP headers and other settings.

We need to specify the headers so that the server knows we are making a request from a client-side application.

Next, we need to specify a callback function. This function will be called when the response is received.

The response object has a data property. This property contains the data received from the server.

In this example, we are only interested in the data property. However, the response object also has other properties that can be useful.

Finally, we need to catch any errors that occur. Errors can occur if the request fails or if the server returns an error.

The catch() method takes a callback function. This function will be called if an error occurs.

The error object has a message property. This property can be used to display an error message to the user.

Now, let’s take a look at the complete example.

import axios from 'axios';

axios.post('https://api.github.com/users', {
headers: {
'Accept': 'application/json'
},
data: {
username: 'axios',
password: 'axios123'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error.message);
});

In this example, we are making a POST request to the GitHub API. We are sending data to the server.

The data we are sending is a username and password.

The response data is an array of objects. Each object contains information about a user.

Making PUT requests

Axios can also be used to make PUT requests.

To make a PUT request, we need to use the axios.put() method.

The axios.put() method takes two arguments. The first argument is the URL of the resource. The second argument is the data to be sent to the server.

In the options object, we can specify the HTTP headers and other settings.

We need to specify the headers so that the server knows we are making a request from a client-side application.

Next, we need to specify a callback function. This function will be called when the response is received.

The response object has a data property. This property contains the data received from the server.

In this example, we are only interested in the data property. However, the response object also has other properties that can be useful.

Finally, we need to catch any errors that occur. Errors can occur if the request fails or if the server returns an error.

The catch() method takes a callback function. This function will be called if an error occurs.

Subscribe to Tech Break

The error object has a message property. This property can be used to display an error message to the user.

Now, let’s take a look at the complete example.

import axios from 'axios';

axios.put('https://api.github.com/users/axios', {
headers: {
'Accept': 'application/json'
},
data: {
username: 'axios',
password: 'axios123'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error.message);
});

In this example, we are making a PUT request to the GitHub API. We are sending data to the server.

The data we are sending is a username and password.

The response data is an array of objects. Each object contains information about a user.

Making DELETE requests

Axios can also be used to make DELETE requests.

To make a DELETE request, we need to use the axios.delete() method.

The axios.delete() method takes two arguments. The first argument is the URL of the resource. The second argument is the data to be sent to the server.

In the options object, we can specify the HTTP headers and other settings.

We need to specify the headers so that the server knows we are making a request from a client-side application.

Next, we need to specify a callback function. This function will be called when the response is received.

The response object has a data property. This property contains the data received from the server.

In this example, we are only interested in the data property. However, the response object also has other properties that can be useful.

Finally, we need to catch any errors that occur. Errors can occur if the request fails or if the server returns an error.

The catch() method takes a callback function. This function will be called if an error occurs.

The error object has a message property. This property can be used to display an error message to the user.

Now, let’s take a look at the complete example.

import axios from 'axios';

axios.delete('https://api.github.com/users/axios', {
headers: {
'Accept': 'application/json'
},
data: {
username: 'axios',
password: 'axios123'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error.message);
});

In this example, we are making a DELETE request to the GitHub API. We are sending data to the server.

The data we are sending is a username and password.

The response data is an array of objects. Each object contains information about a user.

Making PATCH requests

Axios can also be used to make PATCH requests.

To make a PATCH request, we need to use the axios.patch() method.

The axios.patch() method takes two arguments. The first argument is the URL of the resource. The second argument is the data to be sent to the server.

In the options object, we can specify the HTTP headers and other settings.

We need to specify the headers so that the server knows we are making a request from a client-side application.

Next, we need to specify a callback function. This function will be called when the response is received.

The response object has a data property. This property contains the data received from the server.

In this example, we are only interested in the data property. However, the response object also has other properties that can be useful.

Finally, we need to catch any errors that occur. Errors can occur if the request fails or if the server returns an error.

The catch() method takes a callback function. This function will be called if an error occurs.

The error object has a message property. This property can be used to display an error message to the user.

Now, let’s take a look at the complete example.

import axios from 'axios';

axios.patch('https://api.github.com/users/axios', {
headers: {
'Accept': 'application/json'
},
data: {
username: 'axios',
password: 'axios123'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error.message);
});

In this example, we are making a PATCH request to the GitHub API. We are sending data to the server.

The data we are sending is a username and password.

The response data is an array of objects. Each object contains information about a user.


Making HTTP Requests With React Hooks

To use Axios with React Hooks, we need to use the useAxios() hook. This hook takes an options object as an argument and returns an object that contains the data from the response, the error from the request, and a boolean indicating whether or not the request is loading.

For example, we can use the useAxios() hook to make a request to the GitHub API to fetch a list of repositories for a user:

import { useAxios } from 'react-hook-axios'; 
const { data, error, loading } = useAxios('https://api.github.com/users/reactjs/repos');

This will make a GET request to the GitHub API and return the data from the response, the error from the request (if there is one), and a boolean indicating whether or not the request is loading.

If we want to make a POST request, we can use the axios.post() method. This method takes the URL and an object containing the data to be POSTed as arguments:

import { useAxios } from 'react-hook-axios';
const { data, error, loading } = useAxios({ method: 'post', url: 'https://example.com/api/v1/users', data: { name: 'John', age: 20 } });

This will make a POST request to the URL https://example.com/api/v1/users with the data { name: ‘John’, age: 20 } .

We can also use the axios.get() , axios.put() , axios.patch() , and axios.delete() methods for making GET, PUT, PATCH, and DELETE requests, respectively.

Conclusion

In this article, we have looked at how to use Axios with React to make HTTP requests. We have also looked at how to use the React Hooks feature to make HTTP requests with Axios.

Share this Content
Snehasish Konger
Snehasish Konger

Snehasish Konger is the founder of Scientyfic World. Besides that, he is doing blogging for the past 4 years and has written 400+ blogs on several platforms. He is also a front-end developer and a sketch artist.

Articles: 201

Newsletter Updates

Join our email-newsletter to get more insights