Q113- Call a REST API using fetch or axios, handle loading, errors, and display data in React

You can call APIs using fetch or axios and manage loading, error, and data states using React hooks (useState, useEffect).

---

1️⃣ Using fetch

import React, { useState, useEffect } from "react";

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      setLoading(true);
      setError(null);

      try {
        const res = await fetch("https://jsonplaceholder.typicode.com/users");
        if (!res.ok) throw new Error("Network response was not ok");
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default Users;

Explanation:

• loading → shows a spinner or message while fetching
• error → handles network or API errors
• users → stores fetched data for rendering

---

2️⃣ Using axios

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

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      setLoading(true);
      setError(null);

      try {
        const { data } = await axios.get("https://jsonplaceholder.typicode.com/users");
        setUsers(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default Users;

Notes:

• axios automatically parses JSON and handles HTTP errors better than fetch
• Both approaches use useEffect to fetch on component mount

---

⚡ Key Points

• Maintain three states: data, loading, and error
• Always handle API failures gracefully
• Display feedback to users for loading and errors
• Use async/await for clean asynchronous code