axios in Reactjs

Axios is a popular promise-based HTTP client for making HTTP requests, often used in React applications for interacting with APIs. It can be used to perform all types of HTTP requests and works in both the browser and Node.js environments.

How to Install

install Axios using npm or yarn:


npm install axios
# or
yarn add axios

Basic Usage

To use Axios in a React component, you typically import it and then make requests inside useEffect or event handlers.

Example:- get the products list through axios


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

export default function AxiosExample(){

    var [resData, SetresData] = useState([]);

    async function getProducts()
    {
    var data =  await axios.get('https://fakestoreapi.com/products')
    var results = data.data;
    SetresData(results); 
    }

    useEffect(()=>{
        getProducts()
    },[])

    return(
        <>
        <h1>Axios Example</h1>
        <div>
        {
           resData.map((item, index)=>{
            return <div key={index}>
                {item.title}
             </div>
           });
        
        }
        </div>
        </>
    )
}

Note:- in return we can use <> tag instead of div tag

axios in Reactjs – Interview Questions

Q 1: What is Axios?

Ans: Axios is a promise-based HTTP client used for making API requests.

Q 2: Why use Axios instead of Fetch?

Ans: Axios supports interceptors, automatic JSON transformation, and better error handling.

Q 3: How do you install Axios in React?

Ans: npm install axios

Q 4: Where are Axios requests usually made?

Ans: Inside useEffect or event handlers.

Q 5: Does Axios support request cancellation?

Ans: Yes, using cancel tokens or AbortController.