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.

On this page

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.

First, we need to create a file called index.js. Then, we need to import Axios.
Next, we need to make a GET request to the GitHub API. We will use the axios.get() method.
The axios.get() method takes two arguments. The first argument is the URL of the resource. The second argument is an options object.
In the options object, we can specify the HTTP headers and other settings.
We need to select the headers so that GitHub 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.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.

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.