Explore Courses
Liverpool Business SchoolLiverpool Business SchoolMBA by Liverpool Business School
  • 18 Months
Bestseller
Golden Gate UniversityGolden Gate UniversityMBA (Master of Business Administration)
  • 15 Months
Popular
O.P.Jindal Global UniversityO.P.Jindal Global UniversityMaster of Business Administration (MBA)
  • 12 Months
New
Birla Institute of Management Technology Birla Institute of Management Technology Post Graduate Diploma in Management (BIMTECH)
  • 24 Months
Liverpool John Moores UniversityLiverpool John Moores UniversityMS in Data Science
  • 18 Months
Popular
IIIT BangaloreIIIT BangalorePost Graduate Programme in Data Science & AI (Executive)
  • 12 Months
Bestseller
Golden Gate UniversityGolden Gate UniversityDBA in Emerging Technologies with concentration in Generative AI
  • 3 Years
upGradupGradData Science Bootcamp with AI
  • 6 Months
New
University of MarylandIIIT BangalorePost Graduate Certificate in Data Science & AI (Executive)
  • 8-8.5 Months
upGradupGradData Science Bootcamp with AI
  • 6 months
Popular
upGrad KnowledgeHutupGrad KnowledgeHutData Engineer Bootcamp
  • Self-Paced
upGradupGradCertificate Course in Business Analytics & Consulting in association with PwC India
  • 06 Months
OP Jindal Global UniversityOP Jindal Global UniversityMaster of Design in User Experience Design
  • 12 Months
Popular
WoolfWoolfMaster of Science in Computer Science
  • 18 Months
New
Jindal Global UniversityJindal Global UniversityMaster of Design in User Experience
  • 12 Months
New
Rushford, GenevaRushford Business SchoolDBA Doctorate in Technology (Computer Science)
  • 36 Months
IIIT BangaloreIIIT BangaloreCloud Computing and DevOps Program (Executive)
  • 8 Months
New
upGrad KnowledgeHutupGrad KnowledgeHutAWS Solutions Architect Certification
  • 32 Hours
upGradupGradFull Stack Software Development Bootcamp
  • 6 Months
Popular
upGradupGradUI/UX Bootcamp
  • 3 Months
upGradupGradCloud Computing Bootcamp
  • 7.5 Months
Golden Gate University Golden Gate University Doctor of Business Administration in Digital Leadership
  • 36 Months
New
Jindal Global UniversityJindal Global UniversityMaster of Design in User Experience
  • 12 Months
New
Golden Gate University Golden Gate University Doctor of Business Administration (DBA)
  • 36 Months
Bestseller
Ecole Supérieure de Gestion et Commerce International ParisEcole Supérieure de Gestion et Commerce International ParisDoctorate of Business Administration (DBA)
  • 36 Months
Rushford, GenevaRushford Business SchoolDoctorate of Business Administration (DBA)
  • 36 Months
KnowledgeHut upGradKnowledgeHut upGradSAFe® 6.0 Certified ScrumMaster (SSM) Training
  • Self-Paced
KnowledgeHut upGradKnowledgeHut upGradPMP® certification
  • Self-Paced
IIM KozhikodeIIM KozhikodeProfessional Certification in HR Management and Analytics
  • 6 Months
Bestseller
Duke CEDuke CEPost Graduate Certificate in Product Management
  • 4-8 Months
Bestseller
upGrad KnowledgeHutupGrad KnowledgeHutLeading SAFe® 6.0 Certification
  • 16 Hours
Popular
upGrad KnowledgeHutupGrad KnowledgeHutCertified ScrumMaster®(CSM) Training
  • 16 Hours
Bestseller
PwCupGrad CampusCertification Program in Financial Modelling & Analysis in association with PwC India
  • 4 Months
upGrad KnowledgeHutupGrad KnowledgeHutSAFe® 6.0 POPM Certification
  • 16 Hours
O.P.Jindal Global UniversityO.P.Jindal Global UniversityMaster of Science in Artificial Intelligence and Data Science
  • 12 Months
Bestseller
Liverpool John Moores University Liverpool John Moores University MS in Machine Learning & AI
  • 18 Months
Popular
Golden Gate UniversityGolden Gate UniversityDBA in Emerging Technologies with concentration in Generative AI
  • 3 Years
IIIT BangaloreIIIT BangaloreExecutive Post Graduate Programme in Machine Learning & AI
  • 13 Months
Bestseller
IIITBIIITBExecutive Program in Generative AI for Leaders
  • 4 Months
upGradupGradAdvanced Certificate Program in GenerativeAI
  • 4 Months
New
IIIT BangaloreIIIT BangalorePost Graduate Certificate in Machine Learning & Deep Learning (Executive)
  • 8 Months
Bestseller
Jindal Global UniversityJindal Global UniversityMaster of Design in User Experience
  • 12 Months
New
Liverpool Business SchoolLiverpool Business SchoolMBA with Marketing Concentration
  • 18 Months
Bestseller
Golden Gate UniversityGolden Gate UniversityMBA with Marketing Concentration
  • 15 Months
Popular
MICAMICAAdvanced Certificate in Digital Marketing and Communication
  • 6 Months
Bestseller
MICAMICAAdvanced Certificate in Brand Communication Management
  • 5 Months
Popular
upGradupGradDigital Marketing Accelerator Program
  • 05 Months
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in Corporate & Financial Law
  • 12 Months
Bestseller
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in AI and Emerging Technologies (Blended Learning Program)
  • 12 Months
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in Intellectual Property & Technology Law
  • 12 Months
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in Dispute Resolution
  • 12 Months
upGradupGradContract Law Certificate Program
  • Self paced
New
ESGCI, ParisESGCI, ParisDoctorate of Business Administration (DBA) from ESGCI, Paris
  • 36 Months
Golden Gate University Golden Gate University Doctor of Business Administration From Golden Gate University, San Francisco
  • 36 Months
Rushford Business SchoolRushford Business SchoolDoctor of Business Administration from Rushford Business School, Switzerland)
  • 36 Months
Edgewood CollegeEdgewood CollegeDoctorate of Business Administration from Edgewood College
  • 24 Months
Golden Gate UniversityGolden Gate UniversityDBA in Emerging Technologies with Concentration in Generative AI
  • 36 Months
Golden Gate University Golden Gate University DBA in Digital Leadership from Golden Gate University, San Francisco
  • 36 Months
Liverpool Business SchoolLiverpool Business SchoolMBA by Liverpool Business School
  • 18 Months
Bestseller
Golden Gate UniversityGolden Gate UniversityMBA (Master of Business Administration)
  • 15 Months
Popular
O.P.Jindal Global UniversityO.P.Jindal Global UniversityMaster of Business Administration (MBA)
  • 12 Months
New
Deakin Business School and Institute of Management Technology, GhaziabadDeakin Business School and IMT, GhaziabadMBA (Master of Business Administration)
  • 12 Months
Liverpool John Moores UniversityLiverpool John Moores UniversityMS in Data Science
  • 18 Months
Bestseller
O.P.Jindal Global UniversityO.P.Jindal Global UniversityMaster of Science in Artificial Intelligence and Data Science
  • 12 Months
Bestseller
IIIT BangaloreIIIT BangalorePost Graduate Programme in Data Science (Executive)
  • 12 Months
Bestseller
O.P.Jindal Global UniversityO.P.Jindal Global UniversityO.P.Jindal Global University
  • 12 Months
WoolfWoolfMaster of Science in Computer Science
  • 18 Months
New
Liverpool John Moores University Liverpool John Moores University MS in Machine Learning & AI
  • 18 Months
Popular
Golden Gate UniversityGolden Gate UniversityDBA in Emerging Technologies with concentration in Generative AI
  • 3 Years
Rushford, GenevaRushford Business SchoolDoctorate of Business Administration (AI/ML)
  • 36 Months
Ecole Supérieure de Gestion et Commerce International ParisEcole Supérieure de Gestion et Commerce International ParisDBA Specialisation in AI & ML
  • 36 Months
Golden Gate University Golden Gate University Doctor of Business Administration (DBA)
  • 36 Months
Bestseller
Ecole Supérieure de Gestion et Commerce International ParisEcole Supérieure de Gestion et Commerce International ParisDoctorate of Business Administration (DBA)
  • 36 Months
Rushford, GenevaRushford Business SchoolDoctorate of Business Administration (DBA)
  • 36 Months
Liverpool Business SchoolLiverpool Business SchoolMBA with Marketing Concentration
  • 18 Months
Bestseller
Golden Gate UniversityGolden Gate UniversityMBA with Marketing Concentration
  • 15 Months
Popular
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in Corporate & Financial Law
  • 12 Months
Bestseller
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in Intellectual Property & Technology Law
  • 12 Months
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in Dispute Resolution
  • 12 Months
IIITBIIITBExecutive Program in Generative AI for Leaders
  • 4 Months
New
IIIT BangaloreIIIT BangaloreExecutive Post Graduate Programme in Machine Learning & AI
  • 13 Months
Bestseller
upGradupGradData Science Bootcamp with AI
  • 6 Months
New
upGradupGradAdvanced Certificate Program in GenerativeAI
  • 4 Months
New
KnowledgeHut upGradKnowledgeHut upGradSAFe® 6.0 Certified ScrumMaster (SSM) Training
  • Self-Paced
upGrad KnowledgeHutupGrad KnowledgeHutCertified ScrumMaster®(CSM) Training
  • 16 Hours
upGrad KnowledgeHutupGrad KnowledgeHutLeading SAFe® 6.0 Certification
  • 16 Hours
KnowledgeHut upGradKnowledgeHut upGradPMP® certification
  • Self-Paced
upGrad KnowledgeHutupGrad KnowledgeHutAWS Solutions Architect Certification
  • 32 Hours
upGrad KnowledgeHutupGrad KnowledgeHutAzure Administrator Certification (AZ-104)
  • 24 Hours
KnowledgeHut upGradKnowledgeHut upGradAWS Cloud Practioner Essentials Certification
  • 1 Week
KnowledgeHut upGradKnowledgeHut upGradAzure Data Engineering Training (DP-203)
  • 1 Week
MICAMICAAdvanced Certificate in Digital Marketing and Communication
  • 6 Months
Bestseller
MICAMICAAdvanced Certificate in Brand Communication Management
  • 5 Months
Popular
IIM KozhikodeIIM KozhikodeProfessional Certification in HR Management and Analytics
  • 6 Months
Bestseller
Duke CEDuke CEPost Graduate Certificate in Product Management
  • 4-8 Months
Bestseller
Loyola Institute of Business Administration (LIBA)Loyola Institute of Business Administration (LIBA)Executive PG Programme in Human Resource Management
  • 11 Months
Popular
Goa Institute of ManagementGoa Institute of ManagementExecutive PG Program in Healthcare Management
  • 11 Months
IMT GhaziabadIMT GhaziabadAdvanced General Management Program
  • 11 Months
Golden Gate UniversityGolden Gate UniversityProfessional Certificate in Global Business Management
  • 6-8 Months
upGradupGradContract Law Certificate Program
  • Self paced
New
IU, GermanyIU, GermanyMaster of Business Administration (90 ECTS)
  • 18 Months
Bestseller
IU, GermanyIU, GermanyMaster in International Management (120 ECTS)
  • 24 Months
Popular
IU, GermanyIU, GermanyB.Sc. Computer Science (180 ECTS)
  • 36 Months
Clark UniversityClark UniversityMaster of Business Administration
  • 23 Months
New
Golden Gate UniversityGolden Gate UniversityMaster of Business Administration
  • 20 Months
Clark University, USClark University, USMS in Project Management
  • 20 Months
New
Edgewood CollegeEdgewood CollegeMaster of Business Administration
  • 23 Months
The American Business SchoolThe American Business SchoolMBA with specialization
  • 23 Months
New
Aivancity ParisAivancity ParisMSc Artificial Intelligence Engineering
  • 24 Months
Aivancity ParisAivancity ParisMSc Data Engineering
  • 24 Months
The American Business SchoolThe American Business SchoolMBA with specialization
  • 23 Months
New
Aivancity ParisAivancity ParisMSc Artificial Intelligence Engineering
  • 24 Months
Aivancity ParisAivancity ParisMSc Data Engineering
  • 24 Months
upGradupGradData Science Bootcamp with AI
  • 6 Months
Popular
upGrad KnowledgeHutupGrad KnowledgeHutData Engineer Bootcamp
  • Self-Paced
upGradupGradFull Stack Software Development Bootcamp
  • 6 Months
Bestseller
KnowledgeHut upGradKnowledgeHut upGradBackend Development Bootcamp
  • Self-Paced
upGradupGradUI/UX Bootcamp
  • 3 Months
upGradupGradCloud Computing Bootcamp
  • 7.5 Months
PwCupGrad CampusCertification Program in Financial Modelling & Analysis in association with PwC India
  • 5 Months
upGrad KnowledgeHutupGrad KnowledgeHutSAFe® 6.0 POPM Certification
  • 16 Hours
upGradupGradDigital Marketing Accelerator Program
  • 05 Months
upGradupGradAdvanced Certificate Program in GenerativeAI
  • 4 Months
New
upGradupGradData Science Bootcamp with AI
  • 6 Months
Popular
upGradupGradFull Stack Software Development Bootcamp
  • 6 Months
Bestseller
upGradupGradUI/UX Bootcamp
  • 3 Months
PwCupGrad CampusCertification Program in Financial Modelling & Analysis in association with PwC India
  • 4 Months
upGradupGradCertificate Course in Business Analytics & Consulting in association with PwC India
  • 06 Months
upGradupGradDigital Marketing Accelerator Program
  • 05 Months

How to Use Axios in React [Beginners Guide 2024]

Updated on 08 June, 2023

17.59K+ views
7 min read

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. 

Frequently Asked Questions (FAQs)

1. Can I configure Axios with custom settings, such as a base URL or timeout?

You can configure Axios with custom settings using the “axios.create()” method. This allows you to create an Axios instance with specific configurations like a base URL, default headers, timeouts, and more.

2. Can I use Axios with async/await syntax?

You can use the async/await syntax with Axios to handle asynchronous requests. By marking a function as “async” and using the “await” keyword before making an Axios request, you can write asynchronous code in a more synchronous style.

3. Does Axios support file uploads?

Yes, Axios supports file uploads. You can send files using the “FormData” object and then include it as the data in a POST request using the “axios.post()” method.

RELATED PROGRAMS