JavaScript Fetch API: Syntax, Usage, and Examples

The JavaScript Fetch API lets you make HTTP requests in a simple, promise-based way. You can use it to fetch data from APIs, send data to servers, and handle network requests efficiently.

How to Use the Fetch API in JavaScript

The Fetch API provides a fetch() method that returns a Promise.

Basic Syntax

                  

                    jsx
                    
                      
                    
                  
                  

                    fetch(url, options)
  .then(response => response.json()) // Convert response to JSON
  .then(data => console.log(data))   // Handle the data
  .catch(error => console.error("Error fetching data:", error)); // Handle errors

                  
                

• url is the endpoint you want to fetch data from.
• options (optional) lets you specify the request type (GET, POST, etc.) and additional settings.
• .then(response => response.json()) converts the response to JSON format.
• .catch(error => console.error()) logs errors if the request fails.

When to Use the Fetch API in JavaScript

Use the Fetch API when you need to interact with external data sources.

1. Fetch data from an API, like weather reports or user details.
2. Send form data to a server with a POST request.
3. Load large datasets in the background to keep a page responsive.

Examples of Fetch API in JavaScript

Fetching Data from an API with GET

You can use a GET request to retrieve data from an API.

                  

                    jsx
                    
                      
                    
                  
                  

                    fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(response => response.json())
  .then(user => console.log("User:", user))
  .catch(error => console.error("Error fetching user data:", error));

                  
                

Sending Data with a POST Request

A POST request sends data to an API.

                  

                    jsx
                    
                      
                    
                  
                  

                    fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "New Post",
    body: "This is a new post.",
    userId: 1
  })
})
.then(response => response.json())
.then(data => console.log("Post created:", data))
.catch(error => console.error("Error posting data:", error));

                  
                

Handling Errors

Handling errors prevents unexpected behavior.

                  

                    jsx
                    
                      
                    
                  
                  

                    fetch("https://invalid-api.com/data")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error("Fetch error:", error.message));

                  
                

If the API is unavailable or returns a 404/500 error, the catch() block handles it.

Learn More About the Fetch API in JavaScript

Using async and await for Cleaner Code

You can replace .then() with async and await to make code easier to read.

                  

                    jsx
                    
                      
                    
                  
                  

                    async function fetchData() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let data = await response.json();
    console.log("Post:", data);
  } catch (error) {
    console.error("Error fetching post:", error);
  }
}

fetchData();

                  
                

Fetching Multiple Requests at Once

You can fetch multiple APIs at the same time with Promise.all().

                  

                    jsx
                    
                      
                    
                  
                  

                    Promise.all([
  fetch("https://jsonplaceholder.typicode.com/users/1").then(res => res.json()),
  fetch("https://jsonplaceholder.typicode.com/posts/1").then(res => res.json())
])
.then(([user, post]) => {
  console.log("User:", user);
  console.log("Post:", post);
})
.catch(error => console.error("Error fetching data:", error));

                  
                

Fetching API Data in JavaScript React

In React, use the Fetch API inside useEffect() to fetch data when a component loads.

                  

                    jsx
                    
                      
                    
                  
                  

                    import { useState, useEffect } from "react";

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error("Error fetching data:", error));
  }, []);

  return (
    <div>
      {data ? <h1>{data.title}</h1> : <p>Loading...</p>}
    </div>
  );
}

export default App;

                  
                

Fetch API vs. XMLHttpRequest

The Fetch API replaces XMLHttpRequest (XHR) because:

• It uses Promises, which makes code more readable.
• It has built-in JSON handling with response.json().
• It supports streaming and better request customization.

Caching API Responses

To avoid unnecessary API calls, store responses in localStorage.

                  

                    jsx
                    
                      
                    
                  
                  

                    async function fetchWithCache(url) {
  let cached = localStorage.getItem(url);
  if (cached) {
    return JSON.parse(cached);
  }

  let response = await fetch(url);
  let data = await response.json();
  localStorage.setItem(url, JSON.stringify(data));
  return data;
}

fetchWithCache("https://jsonplaceholder.typicode.com/posts/1")
  .then(data => console.log("Fetched data:", data))
  .catch(error => console.error("Fetch error:", error));

                  
                

Fetching Large Data Sets with Pagination

Instead of loading all data at once, use pagination to fetch small chunks.

                  

                    jsx
                    
                      
                    
                  
                  

                    async function fetchPaginatedData(page) {
  let response = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=5`);
  let data = await response.json();
  console.log(`Page ${page} data:`, data);
}

fetchPaginatedData(1);
fetchPaginatedData(2);

                  
                

The JavaScript Fetch API is a powerful tool for making HTTP requests. Using async/await, Promise.all(), and caching techniques, you can optimize your requests and build responsive applications.