How to Use Axios in React [Beginners Guide 2024]

Introduction to Axios and Its Features

For those wondering what is Axios in React, here is a brief introduction. Axios is a popular JavaScript library for making HTTP requests from a web browser or a Node.js server. It performs various operations, such as retrieving and sending data and handling responses. 

Axios simplifies making HTTP requests in JavaScript by providing an agile and user-friendly interface. It has gained widespread adoption in the JavaScript community due to its versatility and accessibility. If you wish to get introduced to Axios in React, sign up for the Full Stack Software Development Boot Camp by upGrad.

Setting Up Axios in React

To set up Axios in a React project, follow these steps:

Step 1: Install Axios

Start by installing Axios as a dependency in your project. You can use “npm” or “yarn” for this. Open your terminal and run the following command:

npm install axios

Step 2: Import Axios

In the component where you want to use Axios, import it at the top of your file:

import axios from 'axios';

Step 3: Make API Requests

You can now use Axios to make API requests. For instance, if you want to make a GET request to retrieve data from an API:

axios.get('https://api.example.com/endpoint')

  .then(response => {

    // Handle the response data

    console.log(response.data);

  })

  .catch(error => {

    // Handle any errors

    console.error('Error:', error);

  });

This code sends a GET request to the URL (https://api.example.com/endpoint). In the “.then()” block, you can access the response data using “response.data”. The “.catch()” block handles any errors during the request.

Check out our free technology courses to get an edge over the competition.

Making GET Requests With Axios

You can make the GET request using the “axios.get()” method. Here is an example:

axios.get('https://api.example.com/endpoint')

  .then(response => {

    console.log(response.data); // Do something with the response data

  })

  .catch(error => {

    console.error('Error:', error); // Handle any errors

  });

In the above example, we make a GET request to the specified URL (https://api.example.com/endpoint). The “axios.get()” method returns a promise. Hence, we can use “.then()” to handle the successful response. We can use “.catch()” to handle any errors.

Handling Responses With Axios

When working with Axios in React, you can handle responses in different ways depending on your specific requirements. Here is an example using promises:

axios.get('https://api.example.com/endpoint')

  .then(response => {

    // Handle successful response

    console.log(response.data);

  })

  .catch(error => {

    // Handle error

    console.error('Error:', error);

  });

In the code above, you handle the response using the “.then()” method. The response data can be accessed through “response.data”. If an error occurs during the request, it can be handled using the “.catch()” method.

Check Out upGrad’s Software Development Courses to upskill yourself.

Error Handling With Axios

When using Axios in React, error handling is an important aspect of handling API requests. Axios provides several ways to handle errors. Here is an example using promises:

axios.get('https://api.example.com/endpoint')

  .then(response => {

    // Handle successful response

    console.log(response.data);

  })

  .catch(error => {

    // Handle error

    if (error.response) {

      // The request was made and the server responded with a status code outside the range of 2xx

      console.error('Status:', error.response.status);

      console.error('Data:', error.response.data);

    } else if (error.request) {

      // The request was made but no response was received

      console.error('No response received:', error.request);

    } else {

      // Something happened in setting up the request that triggered an error

      console.error('Error:', error.message);

    }

  });

The “.catch()” block handles errors in the above code. The error object provides different properties for different scenarios. “error.response” is present when a response was received from the server. “error.request” is present when the request was made but no response was received. “error.message” is present when an error occurred while setting up the request.

Making POST Requests With Axios

You can make the POST request using the “axios.post()” method. Here is an example:

axios.post('https://api.example.com/endpoint', { data: 'example data' })

  .then(response => {

    console.log(response.data); // Handle the response data

  })

  .catch(error => {

    console.error('Error:', error); // Handle any errors

  });

In the example above, we make a POST request to the URL (https://api.example.com/endpoint). The second argument to “axios.post()” is the data you want to send in the request body. In this case, we pass an object “{ data: ‘example data’ }”.

The “.then()” block handles the successful response, and you can access the response data using “response.data”. The “.catch()” block handles any errors during the request.

Handling POST Request Responses With Axios

When handling POST request responses with Axios in React, you can use the same techniques in handling GET request responses. Here is an example using promises:

axios.post('https://api.example.com/endpoint', { data: 'example data' })

  .then(response => {

    // Handle successful response

    console.log(response.data);

  })

  .catch(error => {

    // Handle error

    console.error('Error:', error);

  });

In this code, the “.then()” block handles the successful response, and you can access the response data using “response.data”. If an error occurs during the request, it is caught in the “.catch()” block, where you can handle and log it.

Using Axios Interceptors in React

Axios interceptors in React are a powerful feature that allows you to intercept and modify requests and responses made with Axios globally. Interceptors act as middleware. They enable you to add custom logic before a request is sent or after receiving a response. This helps you centralise common functionality. You can now apply it consistently across your application.

To use interceptors, you start by importing Axios into your React component. Then, you can create request and response interceptors using the “axios.interceptors” object. Request interceptors modify the request configuration. This includes adding headers or tokens while response interceptors handle the response data. This allows you to modify it or handle errors.

Once the interceptors are set up, they will automatically be triggered for each corresponding request or response. For instance, a request interceptor can add an authentication token to every outgoing request. A response interceptor can modify the response data before it reaches your application code.

It is important to remember to clean up interceptors when they are no longer needed. This is important, especially in React components, to avoid memory leaks. This can be done by ejecting the interceptors. You can use the “axios.interceptors.request.eject()” and “axios.interceptors.response.eject()” methods.

Axios interceptors in React efficiently handle common tasks, implement global functionality, and customise your HTTP requests and responses, providing a seamless and consistent experience throughout your application.

Cancelling Axios Requests in React

Cancelling Axios requests in React involves using the CancelToken feature provided by Axios. 

First, you create a cancel token using “axios.CancelToken.source()”. Then, while making a request, you pass the cancel token as the “cancelToken” property in the request configuration. 

You call “cancel()” on the cancel token source to cancel the request. When the request is cancelled, it triggers an error that can be handled in the “.catch()” block. By cancelling requests, you can prevent unnecessary network traffic and handle scenarios where a request is no longer needed, improving the efficiency and responsiveness of your React application.

Axios Best Practices for React Developers

Here are some Axios best practices for React developers:

• Use Axios’ request cancellation feature to cancel requests when they are no longer needed, preventing unnecessary network traffic.
• Implement error handling using “.catch()” to gracefully handle errors and provide appropriate feedback to the user.
• Utilise Axios’ interceptors to add global request headers, handle authentication, modify responses, or implement custom logic.
• Encapsulate API calls in separate modules or functions for better organisation and reusability.

These are just a few best practices that React developers adopt. There are several more that you may adopt as a software developer. You could consider taking up an Executive Post Graduate Programme in Software Development if you already have experience in software development but wish to master its concepts better. 

Conclusion

You can efficiently communicate with APIs or servers, fetch data, and handle responses reliably and flexibly with the help of Axios in your React application. If you want to understand Axios in React, enrol in the Master of Science in Computer Science by upGrad. This course aims at teaching you all the in-demand skills in computer science and helps you ascend the corporate ladder with ease. Visit upGrad to know more.