How to fetch data from API using AXIOS in React App

In this tutorial, we will learn how to fetch data from API using Axios (dependency) in React Application.
There are two ways of fetching the data from API, But why should use AXIOS rather than the FETCH method, let me discuss them at the end of this blog.

What is Axios?
Axios is a library that serves to create HTTP requests that are present externally. it can make HTTP requests from the browser and handle the transformation of request and response data and also it supports both JavaScript and Node.js.

What is Fetch?
Fetch is an inbuilt method to send or get data across the network. The request can be of any APIs that return the data of the format JSON or XML.

Requirements?
1. Install Node.js on your machine from https://nodejs.org/en/
2. Create React App using the below command in the terminal.
npx create-react-app my-app
3. To start the Application use the below command
npm start
4. Install Axios dependency using npm
npm i axios

Where do we make HTTP requests?
In class-based components, requests are made in the componentDidMount() life cycle method, But in functional-based components, requests are made with the help of React lifecycle hooks i.e useEffect.

Axios supports several HTTP request methods such as GET, POST, PUT, etc.

Fetching Data in Axios using the Get Method in Functional components:

Axios offers a get method with at least one argument(URL).

useEffect(()=>{
        axios.get("https://jsonplaceholder.typicode.com/todos/").then(
            response => console.log(response.data))
    },[]);

Check the above snippet is a simple syntax to get the data from API using Axios.
Let me explain:
Axios uses promises and gets returns a promise "then". This method takes a function as input and the function will get executed once the promise is resolved.
This is how we get the data from the server.

const [data, setData] = useState([]);

  useEffect(()=>{
        axios.get("https://jsonplaceholder.typicode.com/todos/").then(
            response => setData(response.data))
    },[]);

In the above snippet, we created an arrow function where we fetched data from the server and then passed it into a variable called fetch data and which is called in lifecycle hooks.
The second parameter [fetchurl] is a variable in which the URLs are available, ignore the second parameter and it works with an empty array (it means the hook runs one at a time).

The above image shows how the data is fetched and is being consumed or used in my component.

import React,{useState, useEffect} from "react";
import './App.css';
import axios from "axios";

function App() {
  const [data, setData] = useState([]);

  useEffect(()=>{
        axios.get("https://jsonplaceholder.typicode.com/todos/").then(
            response => console.log(response.data))
    },[]);
  return (
    <div>
        <table className="table" >
        <thead>
            <tr>
                <th>User Id</th>
                <th>Id</th>
                <th>title</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            {data.map(item => (
                <tr key={item.userId}>
                    <td>{item.id}</td>
                    <td>{item.title}</td>
                    <td>{item.completed}</td>
                </tr>
            ))}
        </tbody>
    </table>
    </div>
  );
}

export default App;

In the above code, To iterate the data using the map function over a variable. Here To display it to the DOM. we need to use the map() function and return JSX from the callback function, This is the most common method to display the data.

Conclusion
In this blog, you have learned how to make HTTP requests by using Axios, and we have been getting the data from the server. I am sure this blog had made your Axios journey a nice one. Feel free to practice what you have learned.