The Fetch API

Working with the Promise object

Before it returns a Response object, the fetch() method returns a Promise object that can have one of three possible properties:

A Promise is said to be settled or resolved if it is either fulfilled or rejected, but not pending. When a Promise is fulfilled, you can use its then() and catch() methods to handle it.

• The async keyword before the function declaration automatically makes the function return a Promise.
• The await keyword pauses execution until the Promise is resolved or rejected.

In summary, the fetch() method returns a Promise that resolves to a Response object once the network request completes.

Using await with fetch() means your code waits for the network request to complete before continuing, but without blocking the main thread.

If the request completes successfully, the requested data is returned and wrapped inside a Response object.

Update your sample code as shown below.

Copy Code /**
* Asynchronous function to fetch user data from a remote API.
* Uses the Fetch API with async/await for cleaner promise handling.
*/
async function fetchUserData() {
   // Initiate a GET request to the RESTful API endpoint for user with ID 2
   // The 'await' keyword pauses execution until the fetch Promise resolves
   const response = await fetch("https://reqres.in/api/users/2");
   
   // Check if the HTTP response status is in the successful range (200-299)
   // response.ok is true for successful HTTP status codes, false otherwise
   if (!response.ok) {
       // If response has an error status code, log a message
       // This handles cases like 404 (not found), 500 (server error), etc.
       console.log("Network response was not ok");
   }
   else {
       // For successful responses, parse the JSON body content
       // response.json() returns a Promise that resolves with the parsed JSON
       // 'await' is used to wait for the parsing to complete
       const data = await response.json();
       
       // Output the parsed user data object to the console
       // This will display properties like id, email, first_name, last_name, etc.
       console.log(data);
   }
}

// Execute the fetchUserData function to start the API request
// This initiates the asynchronous operation
fetchUserData();

For more detailed server error-checking, update the if statement as follows:

Copy Code if (!response.ok) {
  console.log(`Network response was not ok - Status: ${response.status} ${response.statusText}`);
}

This will show both the numeric status code (like 404, 500, etc.) and the associated status text (like "Not Found" or "Internal Server Error"). This provides more detailed information about what went wrong with the request.

The data from the server is not directly accessible from the Resonse object. So you need to process the data using one of two methods:

Adding further error-checking

The if(!response.ok) condition only checks if the HTTP response status is in the successful range (200-299). It handles scenarios where the server responded properly but with an error status code like 404 (Not Found) or 500 (Internal Server Error).

Adding a try-catch clause provides wider protection against different types of errors than the if(!response.ok) condition checks for. These include:

• Network errors - if the fetch fails completely (e.g., no internet connection, DNS failure)
• Server errors - if the server responds with an error status code (e.g., 404, 500)
• Client errors - if the fetch request is malformed or the server cannot process it
• Parsing errors - if response.json() fails because the response isn't valid JSON

About the try-catch syntax

The try-catch statement in JavaScript allows you to test a block of code for errors and handle any exceptions that occur. The basic syntax is as follows.

  try {
      // Code that might cause an error
  } catch (error) {
      // Code to handle the error
  }

Here is how it works:

• The try block contains the code that might throw an exception.
• If an exception occurs within the try block, execution of that block stops immediately.
• Control transfers to the catch block.
• The catch parameter (commonly named error or err) contains information about the error.
• After the catch block executes, the program continues running after the try-catch statement.

Update your code as shown below.

Copy Code /**
 * Asynchronous function to fetch user data from a remote API.
 * Uses the Fetch API with async/await for cleaner promise handling.
 */
async function fetchUserData() {
  try {
    // Initiate a GET request to the RESTful API endpoint for user with ID 2
    // The 'await' keyword pauses execution until the fetch Promise resolves
    const response = await fetch("https://reqres.in/api/users/2");
    
    // Check if the HTTP response status is in the successful range (200-299)
    // response.ok is true for successful HTTP status codes, false otherwise
    if (!response.ok) {
        // If response has an error status code, log a message
        // This handles cases like 404 (not found), 500 (server error), etc.
          console.log(`Network response was not ok - Status: ${response.status} ${response.statusText}`);
    }
    else {
        // For successful responses, parse the JSON body content
        // response.json() returns a Promise that resolves with the parsed JSON
        // 'await' is used to wait for the parsing to complete
        const data = await response.json();
        
        // Output the parsed user data object to the console
        // This will display properties like id, email, first_name, last_name, etc.
        console.log(data);
    }
  } catch (error) {
    // Catch network errors, JSON parsing errors, or any other exceptions
    console.error("Error fetching user data:", error);
  }
}
// Execute the fetchUserData function to start the API request
// This initiates the asynchronous operation
fetchUserData();

Working with sample data

If the request completes successfully, the requested data is returned and wrapped inside a Response object. This object has a number of useful properties and methods for working with the data from the server.

Let's work with a an example of fetching the contents of a JSON file.

Paste the following server URIs with which you can use the fetch() method.

Copy Code 
const URI_1 = "https://reqres.in/api/users";
const URI_2 = "https://reqres.in/api/users/2";
const URI_3 = "https://jsonplaceholder.typicode.com/users";
const URI_4 = "https://pokeapi.co/api/v2/eevee";

Update the URL in your fetch() method as follows:

const response = await fetch("URI_1");

In the DevTools Console, you can see the result of the call to the fetch() method is a Promise.

Update your code to request data on a single user (with an id of 2) and view the result in your Console.

const response = await fetch("URI_2");

What would happen if you requested data on a non-existent user. For example, a user with an id of 99? Update your sample code as shown below.

Your Console should display the error below.

Pokemon project

Follow these steps:

1. Create an HTML file with the content below:

   Copy Code 	              
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pokemon Finder</title>
   </head>
   
   <body>
                   
     <h1>Find your favorite Pokemon</h1>
                   
     <input type="text" id="pokemonName">
                   
     <button id="btn_1" onclick="fetchData()">Find</button>
                   
     <img id="pokemonSprite" style="display: none">
                   
     <script></script>       
   </body>
   </html>

2. Inside the <script> tag, add the following JavaScript code:

   Copy Code 	 
   async function fetchData(){
           
   try {
           
       const pokemonName = document.getElementById("pokemonName").value.toLowerCase();
                   
       const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);
           
       if(!response.ok){
         throw new Error("Could not fetch resource");
       }
           
       const data = await response.json();
         const pokemonSprite = data.sprites.front_default;
         const imgElement = document.getElementById("pokemonSprite");
           
         imgElement.src = pokemonSprite;
         imgElement.style.display = "block";
       }
       catch(error){
         console.error(error);
      }
   }