JavaScript Fetch API

Written by Swapnil RajaPublished 24 Aug 2026

fetch requests data from a server and returns a promise.

The examples below define a small stand-in for fetch so they run without a server.

It behaves like the real thing: it returns a promise for a response object.

Example

javascript

// A stand-in for the network, so this example runs on its own.
function fetch(url) {
  return Promise.resolve({
    ok: true,
    status: 200,
    json: function () {
      return Promise.resolve({ name: "Ada" });
    }
  });
}

fetch("/api/user")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data.name);
  });

PreviousJavaScript Promise.all NextJavaScript Event Loop

Example

javascript

function fetch(url) {
  return Promise.resolve({
    ok: true,
    json: function () { return Promise.resolve({ name: "Grace" }); }
  });
}

async function load() {
  const response = await fetch("/api/user");
  const data = await response.json();
  console.log(data.name);
}

load();

Example

javascript

function fetch(url) {
  return Promise.resolve({ ok: false, status: 404 });
}

async function load() {
  const response = await fetch("/api/missing");
  if (!response.ok) {
    console.log("request failed with status " + response.status);
    return;
  }
  console.log("got the data");
}

load();

Example

javascript

function fetch(url) {
  return Promise.reject(new Error("network down"));
}

async function load() {
  try {
    const response = await fetch("/api/user");
    if (!response.ok) throw new Error("status " + response.status);
    console.log("loaded");
  } catch (error) {
    console.log("failed: " + error.message);
  }
}

load();

Example

javascript

function fetch(url, options) {
  return Promise.resolve({
    ok: true,
    json: function () {
      return Promise.resolve({ sent: JSON.parse(options.body).name });
    }
  });
}

async function save() {
  const response = await fetch("/api/user", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Alan" })
  });
  const data = await response.json();
  console.log(data.sent);
}

save();

Example

javascript

function fetch(url) {
  return Promise.resolve({
    ok: true,
    text: function () { return Promise.resolve("hello"); }
  });
}

async function load() {
  const response = await fetch("/api/greeting");
  console.log(await response.text());
}

load();

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Fetch API</title>
</head>
<body>

  <h1>Fetch API</h1>

  <p id="out">Loading...</p>

  <script>
    async function load() {
      const out = document.getElementById("out");

      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users/1");

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

        const user = await response.json();
        out.textContent = user.name + " from " + user.address.city;
      } catch (error) {
        out.textContent = "Failed: " + error.message;
      }
    }

    load();
  </script>

</body>
</html>

JavaScript Fetch API

Example

How fetch Works

Syntax

With async and await

Example

fetch Does Not Reject on 404

Example

Handling Both Kinds of Failure

Example

Sending Data

Example

Reading Plain Text

Example

Complete Example

Try It Yourself

Important Points

Conclusion