API Calls and Fetch Requests

# CHAPTER 18

API Calls and Fetch Requests #

1. Introduction #

2. Learning Objectives #

• Understand the lifecycle of an HTTP request.

• Execute an HTTP GET request using the fetch API.

• Parse server responses from raw Strings into JSON objects.

• Manage isLoading and error states in the UI.

• Execute an HTTP POST request to send data to a server.

3. The fetch API and Asynchronous Logic #

4. Executing a GET Request (Fetching Data) #

// 1. Mark the function as async!
const fetchUsers = async () => {
  try {
    // 2. AWAIT the network request
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    
    // 3. The response is a raw string. We must parse it into JSON (JavaScript Objects)!
    const data = await response.json();
    
    // 4. Do something with the data
    console.log(data); 
  } catch (error) {
    // 5. Catch internet connection failures!
    console.error("Failed to fetch data:", error);
  }
};

5. Integrating APIs with React State and useEffect #

We also need three pieces of State: The Data, the Loading indicator, and Error messages.

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';

export default function UserListScreen() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(true); // True by default!
  const [error, setError] = useState(null);

  // Runs instantly when the screen opens!
  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      if (!response.ok) throw new Error("Network response was not ok");
      
      const data = await response.json();
      setUsers(data); // Save data to state!
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false); // Turn off the loading spinner!
    }
  };

  // UI RENDERING
  if (isLoading) {
    return <ActivityIndicator size="large" color="blue" style={{ flex: 1 }} />;
  }

  if (error) {
    return <Text style={{ color: &#039;red&#039;, textAlign: &#039;center&#039; }}>Error: {error}</Text>;
  }

  return (
    <FlatList
      data={users}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => <Text style={{ padding: 20 }}>{item.name}</Text>}
    />
  );
}

6. Executing a POST Request (Sending Data) #

const createPost = async (title, bodyText) => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST', // Change method from GET to POST
      headers: {
        'Content-Type': 'application/json', // Tell the server we are sending JSON
      },
      // You cannot send a raw object over the internet. You MUST stringify it!
      body: JSON.stringify({
        title: title,
        body: bodyText,
        userId: 1,
      }),
    });

    const result = await response.json();
    console.log("Successfully created post ID:", result.id);
  } catch (error) {
    console.error("Error creating post:", error);
  }
};

7. Visual Learning: The API Lifecycle #

[ Screen Mounts ] -> useEffect fires
      |
[ State: isLoading = true ] -> UI draws Spinning Wheel
      |
[ fetch() sent to Server ]
      |
[ JSON Data arrives ]
      |
[ State: setUsers(data), setIsLoading(false) ]
      |
[ UI Re-Renders ] -> Spinning Wheel disappears, FlatList draws the data!

8. Common Mistakes #

• Forgetting response.json(): A common beginner error is doing const data = await fetch(url); and then trying to console.log(data.name). The fetch call returns a Response *Object* containing headers and status codes, not the actual JSON body. You MUST perform a second asynchronous step: await data.json() to parse the body text into usable JavaScript objects!

9. Best Practices #

• The finally Block: Notice in Section 5 we put setIsLoading(false) inside a finally block instead of at the end of the try block. The finally block executes *no matter what happens*. If the internet fails and the catch block runs, the loading spinner will still be turned off, ensuring the user isn't trapped staring at an infinite spinning wheel.

10. Practice Exercises #

1. 1. What built-in React hook is used to automatically trigger an API fetch call exactly once when a screen first opens?

1. 2. What JavaScript function must be used to convert a JavaScript Object into a raw string before sending it inside the body of a POST request?

11. MCQs with Answers #

12. Interview Questions #

• Q: Walk me through the complete lifecycle of a component fetching data on mount, focusing on the interplay between useEffect, fetch, and the sequential updates to isLoading and data states.

• Q: Explain the necessity of the JSON.stringify() method when executing a POST request body, and its counterpart response.json() when receiving data. Why can't raw JavaScript objects traverse the network?

• Q: Describe how you would gracefully handle a 500 Internal Server Error response from a fetch call, specifically regarding updating the UI to inform the user.

13. FAQs #

14. Summary #

15. Next Chapter Recommendation #