Axios is a JavaScript library used to send HTTP requests from the frontend to the backend and communicate with APIs.

We commonly use Axios to:

  1. GET – Fetch data from an API.
  2. POST – Send new data to an API.
  3. PUT – Update existing data.
  4. DELETE – Delete data from an API.
  5. How to install Axios :

Open your VS Code terminal:

npm install axios

  1. Axios GET example:

Let's fetch user data from an API.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {

const [users, setUsers] = useState([]); useEffect(() => { axios.get('https://jsonplaceholder.typicode.com/users') .then((response) => { setUsers(response.data); }) .catch((error) => { console.log(error); }); }, []); return ( <div> <h1>User Details</h1> {users.map((user) => ( <p key={user.id}>{user.name}</p> ))} </div> );

}

export default App;

Explanation:

  • useEffect() – Runs the API request after the component mounts.
  • axios.get() – Fetches data from the API.
  • then() – Handles successful responses.
  • response.data – Contains the API response data.
  • catch() – Handles errors.
  • setUsers() – Stores the fetched data in state.
  1. Four Axios methods:

Method Purpose
GET Read data
POST Create data
PUT Update data
DELETE Delete data