Fetch API

HTML5 Fetch API Overview

The Fetch API is the modern JavaScript interface for making HTTP requests from the browser. It replaces the older XMLHttpRequest (XHR) API with a cleaner, Promise-based interface that works naturally with async/await.

Developers use the Fetch API to retrieve data from REST APIs, submit forms, upload files, download resources, authenticate users, communicate with servers, and build modern Single Page Applications (SPAs).

Basic Fetch Syntax

// Basic Fetch request

fetch("/api/users")
  .then((response) => response.json())
  .then((users) => {
    console.log(users);
  })
  .catch((error) => {
    console.error(error);
  });

The fetch() function returns a Promise that resolves to a Response object. The response body can then be converted into JSON, text, Blob, or other formats.

Fetch Request Lifecycle

GET Request Example

// GET request using async/await

async function loadUsers() {
  try {
    const response =
      await fetch("/api/users");

    if (!response.ok) {
      throw new Error("Unable to load users.");
    }

    const users =
      await response.json();

    console.log(users);
  } catch (error) {
    console.error(error.message);
  }
}

loadUsers();

GET requests retrieve data from a server and are the most common Fetch API operation.

POST Request Example

// POST request

async function createUser() {
  const response =
    await fetch("/api/users", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(
        {
          name: "John",
          email: "john@example.com"
        }
      )
    });

  const result =
    await response.json();

  console.log(result);
}

createUser();

POST requests send data to the server, usually for creating new resources.

PUT Request Example

// Update existing resource

fetch("/api/users/5", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(
    {
      name: "David"
    }
  )
})
.then((response) => response.json())
.then((data) => {
  console.log(data);
});

DELETE Request Example

// Delete resource

fetch("/api/users/5", {
  method: "DELETE"
})
.then((response) => {
  console.log(response.status);
});

Common Fetch Options

Response Methods

Upload File Example

// Upload file

const formData =
  new FormData();

formData.append(
  "photo",
  fileInput.files[0]
);

fetch("/upload", {
  method: "POST",
  body: formData
})
.then((response) => response.json())
.then((data) => {
  console.log(data);
});

When sending FormData, do not manually set the Content-Type header because the browser automatically adds the correct multipart boundary.

Download File Example

// Download PDF

async function downloadFile() {
  const response =
    await fetch("/reports/monthly.pdf");

  const blob =
    await response.blob();

  const url =
    URL.createObjectURL(blob);

  const link =
    document.createElement("a");

  link.href = url;
  link.download = "report.pdf";
  link.click();

  URL.revokeObjectURL(url);
}

Cancel Request Example

// Abort Fetch request

const controller =
  new AbortController();

fetch("/api/users", {
  signal: controller.signal
});

setTimeout(() => {
  controller.abort();
}, 3000);

AbortController lets you cancel slow or unnecessary requests, improving performance and responsiveness.

Error Handling

try {
  const response =
    await fetch("/api/users");

  if (!response.ok) {
    throw new Error(
      "HTTP Error: " +
      response.status
    );
  }

  const users =
    await response.json();

  console.log(users);
} catch (error) {
  console.error(error.message);
}

Always check response.ok because Fetch only rejects Promises for network failures, not HTTP errors such as 404 or 500.

Common HTTP Status Codes

Common Fetch API Use Cases

• REST API communication
• Loading dashboard data
• User authentication
• Submitting forms
• Uploading files
• Downloading documents
• Lazy loading content
• Progressive Web Apps

Fetch API Best Practices

• Always check response.ok.
• Wrap asynchronous code in try...catch.
• Use async/await for readable code.
• Abort unnecessary requests.
• Handle loading and error states in the UI.
• Use HTTPS for production APIs.
• Validate server responses before rendering.
• Reuse helper functions for API requests.

Common Fetch API Mistakes

• Assuming Fetch throws errors for HTTP 404 or 500 responses.
• Forgetting to await response.json().
• Ignoring network failures.
• Not cancelling long-running requests.
• Sending JSON without the correct Content-Type.
• Setting multipart headers manually when using FormData.
• Ignoring CORS restrictions.
• Not handling authentication failures.

Fetch API vs XMLHttpRequest

Key Takeaways

• The Fetch API is the modern way to perform HTTP requests.
• It is Promise-based and works naturally with async/await.
• Support for GET, POST, PUT, PATCH, DELETE and other HTTP methods.
• Always check response.ok before reading response data.
• Supports uploads, downloads, authentication, and streaming responses.
• Use Fetch instead of XMLHttpRequest for new applications.