Fetch API

Syntax

fetch(url, options).then(response => response.json())

Examples

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

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

    if (!response.ok) {
      throw new Error(`Server responded with ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.log("Failed to create user:", error.message);
  }
}

createUser({ name: "Alice", email: "alice@example.com" });

Best practices

• Always check response.ok before parsing - fetch() only rejects on network failures, not on HTTP error statuses like 404 or 500
• Wrap fetch calls in try/catch (with async/await) or add a .catch() to handle network failures gracefully
• Set the Content-Type header explicitly when sending JSON, and remember to JSON.stringify() the body
• Use AbortController to cancel a fetch request if it is no longer needed, such as when a user navigates away

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation