The JavaScript fetch() method

Q: How do I use fetch() with async/await?

Await the request and then the body: const res = await fetch(url); const data = await res.json();. Wrap it in try/catch.

Q: How do I send a POST request with fetch()?

Pass an options object: fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }).

Q: How do I get JSON from a fetch response?

Call await response.json(), which parses the body and returns the data.

Method JavaScript All modern browsers Updated June 23, 2026

Quick answer

The fetch() method makes a network request and returns a promise that resolves to the response. The modern pattern is const res = await fetch(url); const data = await res.json();. It's the standard way to call APIs. Note it only rejects on network failure — you must check res.ok for HTTP errors like 404.

Overview

fetch() is how modern JavaScript talks to servers. You give it a URL and it returns a promise for a Response. Because it's promise-based, it pairs beautifully with async/await: const res = await fetch(url) reads almost like synchronous code while staying non-blocking.

Getting the data is a two-step dance. fetch() resolves once the response headers arrive; you then call a method on the response to read the body — usually await res.json() for JSON, or res.text() for plain text. That's why API calls have two awaits.

The gotcha that bites everyone: fetch() only rejects the promise on a network failure (offline, DNS, CORS). An HTTP error status like 404 or 500 still resolves successfully — so you must check res.ok (or res.status) yourself and throw if it's not OK. Wrap the whole thing in try/catch to handle both network and HTTP errors. For a POST, pass a second options object with method, headers and a body (often JSON.stringify()'d).

Syntax

const response = await fetch(url)
const response = await fetch(url, options)

// typical GET
const res = await fetch("/api/users");
if (!res.ok) throw new Error(res.status);
const data = await res.json();

// POST with a JSON body
await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Ada" })
});

Parameters

The fetch() method accepts the following parameters.

Parameter	Description
`resource`	The URL to request, or a `Request` object.
`options`	Optional. A settings object — `method`, `headers`, `body`, `credentials`, `signal` and more.

Example

Live example

// Fetch data from an API with async/await
async function loadUser(id) {
  try {
    const res = await fetch('/api/users/' + id);
    if (!res.ok) throw new Error('HTTP ' + res.status);

    const user = await res.json();
    console.log(user.name);
  } catch (err) {
    console.error('Request failed:', err);
  }
}

loadUser(1);

Best practices

Always check response.ok — fetch() does not reject on HTTP errors like 404 or 500.
Wrap calls in try/catch with async/await to handle network failures.
Remember the two-step read: await fetch() then await res.json().
For POST/PUT, set the method, a Content-Type header and a stringified body.

Frequently asked questions

How do I use fetch() with async/await?

Await the request and then the body: const res = await fetch(url); const data = await res.json();. Wrap it in try/catch.

Why doesn't fetch() throw on a 404?

It only rejects on network errors. HTTP error statuses still resolve, so you must check response.ok and throw yourself.

How do I send a POST request with fetch()?

Pass an options object: fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }).

How do I get JSON from a fetch response?

Call await response.json(), which parses the body and returns the data.

dataset getAttribute()

References