{"id":90271,"date":"2025-10-17T15:45:18","date_gmt":"2025-10-17T10:15:18","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=90271"},"modified":"2026-02-12T18:23:35","modified_gmt":"2026-02-12T12:53:35","slug":"axios-in-react-build-better-web-apps","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/axios-in-react-build-better-web-apps\/","title":{"rendered":"Axios in React: Build Better Web Apps!"},"content":{"rendered":"\n

Axios <\/strong>holds a significant value while developing React applications<\/strong> and platforms. In recent times, developers have been observed to rely heavily on it to handle API requests<\/strong>. <\/p>\n\n\n\n

Before Axios, there was a heavy dependence on the fetch API <\/strong>and basic XMLHttpRequest <\/strong>for making HTTP requests<\/strong>. This resulted in lengthy and repetitive boilerplate code, which involved multiple issues, including manual JSON parsing, complex error handling, and an inconsistent request-response cycle.    <\/p>\n\n\n\n

But after the introduction of Axios in React, multiple time-consuming tasks were automated and simplified, such as making API calls, handling JSON, managing errors, <\/strong>and dealing with inappropriate API structures.   <\/strong><\/p>\n\n\n\n

In this blog, our sole motive is to understand Axios in React <\/strong>along with all its essential aspects. So, let’s get started.<\/p>\n\n\n\n

What is Axios in React and Why It\u2019s Used <\/strong> <\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Axios <\/strong>is an open-source<\/strong> JavaScript <\/strong><\/a>library<\/strong> that was created to make HTTP requests from browsers <\/strong>or any Node.js environmen<\/strong>t. The basic working principle of Axios in React is to establish a communication pathway between client systems and external APIs or servers<\/strong>, where data requests are sent and responses are received in a structured format. For a better comprehension:<\/em><\/strong> Axios is like a bridge that fills the gap between a client (in this case, React applications) and a server.<\/p>\n\n\n\n

This powerful and flexible library enables the React<\/strong><\/a> app to perform multiple data operations, such as fetching, sending, updating, or deleting. Moreover, Axios in React helps developers handle several HTTP methods, such as GET, POST, PUT, and DELETE<\/strong>, making it an effective option for managing all data operations in an app.<\/p>\n\n\n\n

Axios in React smoothens the process of interacting with backend systems by supporting data retrieval in various readable formats, including JSON <\/strong>and URL-encoded forms.<\/strong><\/p>\n\n\n\n

Explore this free resource, your go-to guide for full-stack development:<\/em><\/strong> <\/em>React eBook<\/strong><\/a><\/p>\n\n\n\n

Axios in React<\/strong> acts as a pure HTTP client that seamlessly integrates with the modular components and the virtual DOM (Document Object Model)<\/strong><\/a> tree<\/strong>. Its major benefit is that it gives developers the authority to perform asynchronous API calls<\/strong> using React hooks<\/strong><\/a> like useEffect. Due to this key advantage, developers can execute multiple data operations without even blocking the main user interface (UI) thread.<\/p>\n\n\n\n

In addition, the Axios library automates different workflows, such as abstracting the complexity involved in low-level HTTP requests, managing promise-based responses, <\/strong>and serializing payloads<\/strong>. Furthermore, using Axios in React can safeguard your application from potential memory leaks and runtime issues by handling request cancellation through CancelToken <\/strong>or AbortController<\/strong>.  <\/p>\n\n\n\n

So, to build top-notch web applications<\/a>, Axios in React becomes extremely necessary as it can effectively maintain a seamless data flow and update the UI according to state changes.<\/p>\n\n\n\n

Installing and Setting Up Axios<\/strong><\/h2>\n\n\n\n

1.<\/strong> Now comes the installation<\/strong> part. So, to install the Axios library in your React project or system, initially, you are required to install this library via npm<\/strong>. And it’s a simple command that you have to execute in your React project terminal:<\/p>\n\n\n\n

(Code)<\/em><\/strong><\/p>\n\n\n\n

{<\/strong><\/p>\n\n\n\n

npm install axios<\/p>\n\n\n\n

\/\/ OR<\/p>\n\n\n\n

npm i axios<\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

2.<\/strong> After installing Axios in React, you can now implement it in your React code by simply importing<\/strong> it.<\/p>\n\n\n\n

(Code)<\/em><\/strong> <\/p>\n\n\n\n

{<\/strong><\/p>\n\n\n\n

import axios from ‘axios’;<\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

3. <\/strong>But to ensure an excellent build quality, your React code also needs to be modular and maintainable. For this reason, creating a separate API utility file (here, it is api.js<\/strong>) is highly recommended, as it will serve as a specific location within your project where you can easily configure the Axios library with default settings like the base URL, headers, <\/strong>and timeouts.<\/strong><\/p>\n\n\n\n

(Code)<\/em><\/strong><\/p>\n\n\n\n

{<\/strong><\/p>\n\n\n\n

import axios from ‘axios’;<\/p>\n\n\n\n

const api = axios.create({<\/p>\n\n\n\n

  baseURL: ‘https:\/\/api.example.com’,<\/p>\n\n\n\n

  timeout: 5000,<\/p>\n\n\n\n

  headers: {<\/p>\n\n\n\n

    ‘Content-Type’: ‘application\/json’,<\/p>\n\n\n\n

  },<\/p>\n\n\n\n

});<\/p>\n\n\n\n

export default api;<\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

Making API Requests (GET, POST, PUT, DELETE)<\/strong><\/h2>\n\n\n\n

1. GET<\/strong><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

GET requests<\/strong> are sent by the client (React App) to retrieve data from the servers. In this case, Axios in React automatically parses JSON responses<\/strong>, allowing the client to easily use the received data in the React state.       <\/p>\n\n\n\n

(Code)<\/em><\/strong><\/p>\n\n\n\n

{<\/strong><\/p>\n\n\n\n

const fetchTasks = async () => {<\/p>\n\n\n\n

  try {<\/p>\n\n\n\n

    const response = await axios.get(‘\/tasks’);<\/p>\n\n\n\n

    console.log(‘All tasks:’, response.data);<\/p>\n\n\n\n

  } catch (error) {<\/p>\n\n\n\n

    console.error(‘Error fetching tasks:’, error);<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

};<\/p>\n\n\n\n

} <\/strong><\/p>\n\n\n\n

Explanation:<\/em><\/strong><\/p>\n\n\n\n

In this React code, the client requests the server to retrieve information about all tasks. If the request is completed successfully, the output is printed as a task list. If it fails due to an error, the catch<\/strong> method captures the error and displays an error message to the client. <\/p>\n\n\n\n

NOTE:<\/strong><\/p>\n\n\n\n

We can invoke the fetchTask (async) function<\/strong> during the mounting phase of the component. It is highly recommended to call the function inside the useEffect hook<\/strong> to fetch data<\/a> when the functional components<\/a> are rendered.<\/p>\n\n\n\n

(Code)<\/em><\/strong><\/p>\n\n\n\n

{<\/strong><\/p>\n\n\n\n

import { useEffect } from ‘react’;<\/p>\n\n\n\n

useEffect(() => {<\/p>\n\n\n\n

  fetchTasks(); \/\/ call your GET function here<\/strong><\/p>\n\n\n\n

}, []);<\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

2. POST<\/strong><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

POST requests<\/strong> are made from the client systems to send the new data to the servers<\/strong>. When sending the data in the request body, JSON data or other formats can be included.          <\/p>\n\n\n\n

(Code)<\/em><\/strong><\/p>\n\n\n\n

{<\/strong><\/p>\n\n\n\n

const addTask = async () => {<\/p>\n\n\n\n

  try {<\/p>\n\n\n\n

    const response = await axios.post(‘\/tasks’, { title: ‘Buy groceries’, completed: false });<\/p>\n\n\n\n

    console.log(‘Task added:’, response.data);<\/p>\n\n\n\n

  } catch (error) {<\/p>\n\n\n\n

    console.error(‘Error adding task:’, error);<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

};<\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

Explanation:<\/em><\/strong><\/p>\n\n\n\n

The client is sending new task data to the server to build a task with parameters { title: ‘Buy groceries’, completed: false }<\/strong>. So, in this code, the title defines the name of the task, and completed: false indicates that the task has been recently added to the server, which doesn’t mean it has been completed. Whether it is finished or not will be determined by using the PUT method, which we will discuss next.<\/p>\n\n\n\n

3. PUT<\/strong><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

PUT requests<\/strong> are used to update the data that already exists on the server. While sending this request, the client attaches a resource ID<\/strong> (to help the server in identifying the exact item that needs to be modified) and the updated data in JSON or any other format.    <\/p>\n\n\n\n

(Code)<\/em><\/strong><\/p>\n\n\n\n

{<\/strong><\/p>\n\n\n\n

const updateTask = async () => {<\/p>\n\n\n\n

  try {<\/p>\n\n\n\n

    const response = await axios.put(‘\/tasks\/1’, { title: ‘Buy groceries’, completed: true });<\/p>\n\n\n\n

    console.log(‘Task updated:’, response.data);<\/p>\n\n\n\n

  } catch (error) {<\/p>\n\n\n\n

    console.error(‘Error updating task:’, error);<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

};<\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

Explanation:<\/em><\/strong><\/p>\n\n\n\n

In this example, the React code is updating an existing task (with ID: 1)<\/strong> on the server with the new details. If the new information is updated without any issues, the updated task will be displayed on the screen. If not, the client system will display an error message. <\/p>\n\n\n\n

Here, the parameter completed: true is implemented to mark the completion of the task. Additionally, you can also apply conditional logic for checking the status of completion.<\/p>\n\n\n\n

4. DELETE<\/strong><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

DELETE requests<\/strong> are used to eliminate data from the server, after which the data can’t be accessed from the app anymore. This request is used for deleting specific tasks that are not necessary.<\/p>\n\n\n\n

(Code)<\/em><\/strong><\/p>\n\n\n\n

{<\/strong><\/p>\n\n\n\n

const deleteTask = async () => {<\/p>\n\n\n\n

  try {<\/p>\n\n\n\n

    await axios.delete(‘\/tasks\/1’);<\/p>\n\n\n\n

    console.log(‘Task deleted’);<\/p>\n\n\n\n

  } catch (error) {<\/p>\n\n\n\n

    console.error(‘Error deleting task:’, error);<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

};<\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

Explanation:<\/em><\/strong><\/p>\n\n\n\n

In this React code example, the task with ID: 1<\/strong> is deleted from the server. If the task is removed successfully, it prints the confirmation output; if it fails, it displays the error message. <\/p>\n\n\n\n

Here, observe that we are not using any additional parameters, as the task is detected purely by its ID in the URL.<\/p>\n\n\n\n

NOTE:<\/strong><\/p>\n\n\n\n

All three (3) HTTP method<\/strong> types \u2014 POST, PUT,<\/strong> and DELETE<\/strong> \u2014 are invoked only when users trigger the event by interacting with React UI components<\/strong>, such as clicking, focusing, scrolling, submitting,<\/strong> or mouse activities like hovering <\/strong>or entering.<\/strong><\/p>\n\n\n\n

(Code)<\/em><\/strong><\/p>\n\n\n\n

{<\/strong><\/p>\n\n\n\n

\/\/ POST on form submit<\/strong><\/p>\n\n\n\n

<form onSubmit={addTask}><\/p>\n\n\n\n

  <input type=”text” placeholder=”New Task” \/><\/p>\n\n\n\n

  <button type=”submit”>Add Task<\/button><\/p>\n\n\n\n

<\/form><\/p>\n\n\n\n

\/\/ PUT on button click<\/strong><\/p>\n\n\n\n

<button onClick={updateTask}>Update Task<\/button><\/p>\n\n\n\n

\/\/ DELETE on button click<\/strong><\/p>\n\n\n\n

<button onClick={deleteTask}>Delete Task<\/button><\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

Handling Responses and Errors Using Axios in React<\/strong><\/h2>\n\n\n\n

When using Axios in React<\/strong>, handling responses and errors is crucial to ensure the app behaves correctly and provides feedback to users. Every Axios request returns a promise<\/strong>, which can either resolve with a response or reject with an error.<\/p>\n\n\n\n

Handling Responses<\/strong><\/h3>\n\n\n\n

Here, async\/await<\/strong> works with Promises<\/strong>. You don\u2019t need .then() <\/strong>because await pauses execution until the Promise resolves<\/strong> and gives you the result directly. The returned data from the server is available inside the response object and can be accessed through response.data  (property)<\/strong> that can be easily stored inside the React state for updating the UI.   [ Here, async stands for <\/em><\/strong>asynchronous<\/em><\/strong><\/a>. <\/em>]<\/strong><\/p>\n\n\n\n

(Code)<\/em><\/strong><\/p>\n\n\n\n

{<\/strong><\/p>\n\n\n\n

const fetchTasks = async () => {<\/p>\n\n\n\n

  try {<\/p>\n\n\n\n

    const response = await axios.get(‘\/tasks’);<\/p>\n\n\n\n

    console.log(‘Tasks fetched:’, response.data);<\/p>\n\n\n\n

    setTasks(response.data); \/\/ update React state<\/p>\n\n\n\n

    \/\/ Response Objects<\/strong><\/p>\n\n\n\n

    console.log(‘Status of the response:’, response.status);<\/p>\n\n\n\n

    console.log(‘Headers of the response:’, response.headers);<\/p>\n\n\n\n

  } catch (error) {<\/p>\n\n\n\n

    console.error(‘Error fetching tasks:’, error);<\/p>\n\n\n\n

  }<\/p>\n\n\n\n

};<\/p>\n\n\n\n

}<\/strong><\/p>\n\n\n\n

Essential points to note:<\/em><\/strong><\/p>\n\n\n\n

Using Response Objects<\/strong><\/p>\n\n\n\n